/* =============================================================
   ZEYD ONLINE - HAFIF KOMPOZISYON KATMANI
   Tam ekran panellerde GPU'yu zorlayan canlı backdrop blur ve scale
   animasyonlarını daha ucuz opacity + translate3d gecisleriyle degistirir.
   ============================================================= */

:is(
  .modal-overlay,
  .merchant-overlay,
  .character-overlay,
  .blacksmith-overlay,
  .dungeon-overlay,
  .arena-overlay,
  .ranking-overlay,
  .wheel-overlay,
  .community-overlay,
  .afk-overlay,
  .bank-overlay,
  .friends-overlay,
  .inspect-overlay,
  .feature-overlay
) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition-duration: 140ms;
  will-change: auto;
}

.modal-overlay,
.merchant-overlay { background-color: rgba(4, 2, 9, .78); }
.character-overlay { background-color: rgba(4, 2, 9, .82); }
.blacksmith-overlay { background-color: rgba(4, 2, 9, .84); }
.dungeon-overlay,
.wheel-overlay,
.community-overlay { background-color: rgba(2, 1, 7, .90); }
.arena-overlay,
.ranking-overlay,
.afk-overlay { background-color: rgba(3, 1, 7, .88); }
.bank-overlay { background-color: rgba(3, 1, 7, .84); }

:is(
  .modal-panel,
  .merchant-panel,
  .character-panel,
  .blacksmith-panel,
  .dungeon-panel,
  .arena-panel,
  .ranking-panel,
  .wheel-panel,
  .community-panel,
  .afk-panel,
  .bank-panel
) {
  transform: translate3d(0, 10px, 0);
  transition-property: transform;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(.2, .8, .25, 1);
  backface-visibility: hidden;
  will-change: auto;
}

.modal-overlay--visible .modal-panel,
.merchant-overlay.is-visible .merchant-panel,
.character-overlay.is-visible .character-panel,
.blacksmith-overlay.is-visible .blacksmith-panel,
.dungeon-overlay.is-visible .dungeon-panel,
.arena-overlay.is-visible .arena-panel,
.ranking-overlay.is-visible .ranking-panel,
.wheel-overlay.is-visible .wheel-panel,
.community-overlay.is-visible .community-panel,
.afk-overlay.is-visible .afk-panel,
.bank-overlay.is-visible .bank-panel {
  transform: translate3d(0, 0, 0);
}

/* Kucuk landscape ekranlarda panel gecisi daha kisa ve hareketsizdir. */
@media (max-height: 520px), (prefers-reduced-motion: reduce) {
  :is(
    .modal-overlay,
    .merchant-overlay,
    .character-overlay,
    .blacksmith-overlay,
    .dungeon-overlay,
    .arena-overlay,
    .ranking-overlay,
    .wheel-overlay,
    .community-overlay,
    .afk-overlay,
    .bank-overlay
  ) {
    transition-duration: 90ms;
  }

  :is(
    .modal-panel,
    .merchant-panel,
    .character-panel,
    .blacksmith-panel,
    .dungeon-panel,
    .arena-panel,
    .ranking-panel,
    .wheel-panel,
    .community-panel,
    .afk-panel,
    .bank-panel
  ) {
    transform: none;
    transition: none;
    will-change: auto;
  }

  .modal-overlay--visible .modal-panel,
  .merchant-overlay.is-visible .merchant-panel,
  .character-overlay.is-visible .character-panel,
  .blacksmith-overlay.is-visible .blacksmith-panel,
  .dungeon-overlay.is-visible .dungeon-panel,
  .arena-overlay.is-visible .arena-panel,
  .ranking-overlay.is-visible .ranking-panel,
  .wheel-overlay.is-visible .wheel-panel,
  .community-overlay.is-visible .community-panel,
  .afk-overlay.is-visible .afk-panel,
  .bank-overlay.is-visible .bank-panel {
    transform: none;
  }
}