/* ZALP: эффекты главного меню и ZALP PASS (включаются классом html.zfx-on, при reduced-motion — html.zfx-reduce) */

/* ---------- живой фон ---------- */
html.zfx-on #background { animation: zfx-breathe 38s ease-in-out infinite alternate; transform-origin: 60% 40%; will-change: transform; }
@keyframes zfx-breathe {
  0% { transform: scale(1.04) translate(-0.6%, -0.4%); }
  100% { transform: scale(1.12) translate(0.8%, 0.6%); }
}
#zfx-rays, #zfx-canvas { position: absolute; inset: 0; pointer-events: none; }
#zfx-canvas { width: 100%; height: 100%; }
#zfx-rays {
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: .7;
}
#zfx-rays::before {
  content: "";
  position: absolute;
  left: 78%;
  top: -30%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 160, .32) 0 6deg, rgba(255, 236, 160, 0) 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 22%, transparent 55%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 22%, transparent 55%);
  animation: zfx-rays 90s linear infinite, zfx-rays-pulse 7s ease-in-out infinite;
}
#zfx-rays::after {
  /* мягкое солнечное пятно */
  content: "";
  position: absolute;
  right: -10vmax;
  top: -18vmax;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 196, .55) 0, rgba(255, 214, 120, .18) 35%, transparent 65%);
  animation: zfx-rays-pulse 7s ease-in-out infinite;
}
@keyframes zfx-rays { to { transform: rotate(360deg); } }
@keyframes zfx-rays-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* ---------- логотип: покачивание и блик по форме букв ---------- */
html.zfx-on #start-row-header { animation: zfx-logo 5.5s ease-in-out infinite; }
@keyframes zfx-logo {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -7px; rotate: 1.6deg; }
}
html.zfx-on #start-row-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  -webkit-mask: url(/img/zalp-ui/zalp-logo.webp) center / contain no-repeat;
  mask: url(/img/zalp-ui/zalp-logo.webp) center / contain no-repeat;
  mix-blend-mode: screen;
  animation: zfx-logo-shine 5.5s ease-in-out infinite;
}
html.zfx-on #start-row-header { position: relative; }
@keyframes zfx-logo-shine {
  0%, 55% { background-position: 130% 0; }
  85%, 100% { background-position: -30% 0; }
}

/* ---------- главная кнопка «Играть»: дыхание, свечение, блик ---------- */
html.zfx-on #btn-start-mode-0 { animation: zfx-cta 2.6s ease-in-out infinite; }
@keyframes zfx-cta {
  0%, 100% { scale: 1; filter: drop-shadow(0 0 0 rgba(255, 210, 31, 0)); }
  50% { scale: 1.035; filter: drop-shadow(0 0 14px rgba(255, 210, 31, .85)); }
}
html.zfx-on #btn-start-mode-0::after,
html.zfx-on #zp-open-pass::after,
html.zfx-on .zp-btn.gold::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .7) 46%, rgba(255, 255, 255, 0) 60%) no-repeat;
  background-size: 250% 100%;
  animation: zfx-sheen 3.2s ease-in-out infinite;
}
@keyframes zfx-sheen {
  0%, 50% { background-position: 140% 0; }
  80%, 100% { background-position: -40% 0; }
}
html.zfx-on #btn-start-mode-1, html.zfx-on #btn-start-mode-2,
html.zfx-on #btn-join-team, html.zfx-on #btn-create-team, html.zfx-on #btn-help { transition: scale .18s cubic-bezier(.2, 1.8, .4, 1); }
html.zfx-on #btn-start-mode-1:hover, html.zfx-on #btn-start-mode-2:hover,
html.zfx-on #btn-join-team:hover, html.zfx-on #btn-create-team:hover, html.zfx-on #btn-help:hover { scale: 1.04; }
html.zfx-on .vw-pill { transition: scale .18s cubic-bezier(.2, 1.8, .4, 1); }
html.zfx-on .vw-pill:hover { scale: 1.07; }

/* ---------- появление панелей при входе в меню ---------- */
.zfx-enter #left-column { animation: zfx-in-left .7s cubic-bezier(.2, 1.3, .4, 1) both; }
.zfx-enter #start-menu { animation: zfx-in-up .65s .08s cubic-bezier(.2, 1.4, .4, 1) both; }
.zfx-enter #right-column { animation: zfx-in-right .7s .16s cubic-bezier(.2, 1.3, .4, 1) both; }
.zfx-enter #start-top-right { animation: zfx-in-down .6s .22s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes zfx-in-left { from { opacity: 0; translate: -60px 0; } }
@keyframes zfx-in-right { from { opacity: 0; translate: 60px 0; } }
@keyframes zfx-in-up { from { opacity: 0; translate: 0 50px; scale: .94; } }
@keyframes zfx-in-down { from { opacity: 0; translate: 0 -40px; } }

/* ---------- вспышка при нажатии ---------- */
.zfx-pop {
  position: fixed;
  z-index: 10500;
  pointer-events: none;
  margin: -4px 0 0 -4px;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: zfx-pop .65s cubic-bezier(.15, .8, .3, 1) forwards;
}
@keyframes zfx-pop {
  0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) scale(1) rotate(140deg); opacity: 0; }
}

/* ---------- кристаллы и монеты в панели мерцают ---------- */
html.zfx-on #vw-crystal-btn { animation: zfx-gem 4s ease-in-out infinite; }
@keyframes zfx-gem { 0%, 86%, 100% { filter: none; } 92% { filter: brightness(1.35) drop-shadow(0 0 8px rgba(214, 120, 255, .9)); } }

/* ---------- карточка ZALP PASS в меню ---------- */
html.zfx-on #pass-block { animation: zfx-card-glow 3.6s ease-in-out infinite; }
@keyframes zfx-card-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 210, 31, 0)); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 210, 31, .45)); }
}
html.zfx-on #pass-progress-level { animation: zfx-hex 2.8s ease-in-out infinite; }
@keyframes zfx-hex {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 233, 112, 0)); scale: 1; }
  50% { filter: drop-shadow(0 0 10px rgba(255, 233, 112, .95)); scale: 1.06; }
}
/* полоса опыта: бегущие полоски + блик */
html.zfx-on #pass-progress-bar-fill::after {
  /* заливка из темы (с !important) остаётся, поверх — бегущие полоски и блик */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 8px, rgba(255, 255, 255, 0) 8px 16px);
  background-size: 300% 100%, 32px 32px;
  animation: zfx-bar 2.2s linear infinite;
}
@keyframes zfx-bar {
  from { background-position: 150% 0, 0 0; }
  to { background-position: -150% 0, 32px 0; }
}
/* награда следующего уровня: лучи позади и покачивание */
html.zfx-on #pass-progress-unlock-wrapper::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 94, .55) 0 10deg, rgba(255, 226, 94, 0) 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%);
  mask: radial-gradient(circle, #000 25%, transparent 68%);
  animation: zfx-rays 9s linear infinite;
  z-index: 0;
}
html.zfx-on #pass-progress-unlock-image { animation: zfx-bob 2.6s ease-in-out infinite; }
@keyframes zfx-bob { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -5px; rotate: 3deg; } }
html.zfx-on #zp-open-pass { position: relative; overflow: hidden; animation: zfx-cta-soft 2.6s ease-in-out infinite; }
@keyframes zfx-cta-soft { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 210, 31, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 210, 31, .8)); } }

/* ---------- окно ZALP PASS ---------- */
html.zfx-on #zp-overlay.open { animation: zfx-pass-in .45s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes zfx-pass-in { from { opacity: 0; scale: 1.04; } }
html.zfx-on #zp-overlay .zp-season-name { animation: zfx-title 3s ease-in-out infinite; }
@keyframes zfx-title { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 210, 31, 0)); } 50% { filter: drop-shadow(0 0 12px rgba(255, 210, 31, .9)); } }
html.zfx-on #zp-overlay .zp-hex { animation: zfx-hex 2.8s ease-in-out infinite; }
html.zfx-on #zp-overlay .zp-bar-fill { position: relative; }
html.zfx-on #zp-overlay .zp-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .2) 0 8px, rgba(255, 255, 255, 0) 8px 16px);
  background-size: 300% 100%, 32px 32px;
  animation: zfx-bar 2.2s linear infinite;
}
/* баннер премиума: ключевой арт медленно «дышит», по нему бежит золотой блик */
html.zfx-on #zp-overlay .zp-prem:not(.owned) { animation: zfx-prem-glow 3s ease-in-out infinite; }
@keyframes zfx-prem-glow { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 210, 31, .5), 0 0 14px rgba(255, 210, 31, .3); } 50% { box-shadow: 0 0 0 3px rgba(255, 233, 112, .95), 0 0 30px rgba(255, 180, 40, .65); } }
html.zfx-on #zp-overlay .zp-prem { position: relative; overflow: hidden; }
html.zfx-on #zp-overlay .zp-prem::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 180, .35) 48%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  animation: zfx-sheen 5s ease-in-out infinite;
}
html.zfx-on #zp-overlay .zp-btn.gold { position: relative; overflow: hidden; }
/* дорожка наград: текущий уровень светится, редкие награды — с лучами, премиум-ряд переливается */
html.zfx-on #zp-overlay .zp-col.current .zp-lvl span { animation: zfx-hex 1.8s ease-in-out infinite; }
html.zfx-on #zp-overlay .zp-col.current .zp-rw { animation: zfx-cur 1.8s ease-in-out infinite; }
@keyframes zfx-cur { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 233, 112, 0)); } 50% { filter: drop-shadow(0 0 10px rgba(255, 233, 112, .95)); } }
html.zfx-on #zp-overlay .zp-rw { transition: scale .18s cubic-bezier(.2, 1.8, .4, 1); }
html.zfx-on #zp-overlay .zp-rw:hover { scale: 1.08; }
html.zfx-on #zp-overlay .zp-rw.r-epic:not(.got)::before,
html.zfx-on #zp-overlay .zp-rw.r-mythic:not(.got)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 120%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--zfx-ray, rgba(192, 138, 255, .5)) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 66%);
  mask: radial-gradient(circle, #000 20%, transparent 66%);
  animation: zfx-rays 10s linear infinite;
  z-index: 0;
}
html.zfx-on #zp-overlay .zp-rw.r-mythic { --zfx-ray: rgba(255, 196, 60, .6); }
html.zfx-on #zp-overlay .zp-rw > img:not(.zp-badge) { position: relative; z-index: 1; }
html.zfx-on #zp-overlay .zp-rw.r-mythic:not(.got) > img:not(.zp-badge) { animation: zfx-bob 2.4s ease-in-out infinite; }
html.zfx-on #zp-overlay .zp-rw.locked { overflow: hidden; }
html.zfx-on #zp-overlay .zp-rw.locked::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 220, 120, .35) 48%, transparent 60%) no-repeat;
  background-size: 260% 100%;
  animation: zfx-sheen 4.2s ease-in-out infinite;
}

/* ---------- окно пакетов кристаллов ---------- */
html.zfx-on #zp-modal.open .zp-dialog { animation: zfx-in-up .45s cubic-bezier(.2, 1.4, .4, 1) both; }
html.zfx-on #zp-modal .zp-pack.best { animation: zfx-prem-glow 2.4s ease-in-out infinite; }
html.zfx-on #zp-modal .zp-pack img { animation: zfx-bob 3s ease-in-out infinite; }

@media (max-width: 700px) {
  #zfx-rays { opacity: .35; }
  html.zfx-on #background { animation-duration: 60s; }
}
@media (prefers-reduced-motion: reduce) {
  #zfx-rays, #zfx-canvas { display: none; }
}

/* ---------- ЗАЛП: слабое устройство (html.zfx-lite ставит zalp-fx.js по замеру кадров меню) ---------- */
/* без частиц, лучей и бесконечных анимаций filter/масок; лёгкие блики и покачивания остаются */
html.zfx-lite #zfx-rays,
html.zfx-lite #zfx-canvas,
html.zfx-lite #start-row-header::after { display: none; }
html.zfx-lite #background { animation: none; will-change: auto; }
html.zfx-lite #btn-start-mode-0,
html.zfx-lite #vw-crystal-btn,
html.zfx-lite #pass-block,
html.zfx-lite #pass-progress-level,
html.zfx-lite #zp-open-pass,
html.zfx-lite #zp-overlay .zp-season-name,
html.zfx-lite #zp-overlay .zp-hex,
html.zfx-lite #zp-overlay .zp-prem:not(.owned),
html.zfx-lite #zp-overlay .zp-col.current .zp-lvl span,
html.zfx-lite #zp-overlay .zp-col.current .zp-rw,
html.zfx-lite #zp-modal .zp-pack.best { animation: none; }