/*
  VectorPath — стили блока игры (слайд-шоу).
  Только то, чего нет в web/static/style.css: геометрия блока, слайд-шоу и анимации сцен.
  Подключать ПОСЛЕ web/static/style.css.
*/

/* ── Расположение блока: текст слева, слайд-шоу справа ──────────── */
.vp-wrap { width: 100%; display: flex; justify-content: center; margin-top: 20px; }
.vp-game { padding: 2.2rem; }
.vp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 36px;
  align-items: center;
}
@media (max-width: 900px) {
  .vp-grid { grid-template-columns: 1fr; gap: 24px; }
  .vp-show { order: -1; }   /* на телефоне слайды сверху, название и текст ниже */
}

/* ── Левая колонка ─────────────────────────────────────────── */
.vp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vp-tags .job-listings-tag { background: #f0f7ff; border: 1px solid #bfdbfe; color: #1e40af; font-weight: 600; }
.vp-title { font-size: 2.6rem; line-height: 1.05; margin: 0 0 6px; font-weight: 800; letter-spacing: -0.5px; }
.vp-title .vp-accent {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vp-tagline { font-size: 1.15rem; font-weight: 600; color: #1e40af; margin: 0 0 14px; }
.vp-lead { color: #475569; line-height: 1.65; font-size: 0.98rem; }
.vp-lead b { color: #1e293b; }
.vp-game .features-list { margin: 0 0 18px; }
.vp-note { font-size: 0.8rem; color: #64748b; margin-top: 10px; }

/* ── Слайд-шоу: тёмная скруглённая сцена ─────────────────────── */
.vp-show { min-width: 0; }
.vp-stage {
  position: relative;
  aspect-ratio: 4 / 3.3;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(120% 90% at 50% 40%, #2b1c40 0%, #150c26 55%, #07030f 100%);
  box-shadow: 0 18px 40px rgba(43, 28, 64, 0.35), inset 0 0 0 1px rgba(255,255,255,0.06);
}
/* мягкая «подсветка» по краю сцены */
.vp-stage::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6;
  box-shadow: inset 0 0 60px rgba(124, 58, 237, 0.25);
}
.vp-progress { position: absolute; top: 14px; left: 18px; right: 18px; width: auto; height: 4px; z-index: 7; background: rgba(255,255,255,0.14); }
.vp-progress .progress-fill { background: linear-gradient(90deg, #4ecdc4, #ffe66d); width: 0; }

.vp-slide { position: absolute; inset: 0; opacity: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vp-slide.active  { z-index: 2; opacity: 1; }
.vp-slide.leaving { z-index: 1; opacity: 1; animation: vp-out 1.3s ease-in forwards; }
@keyframes vp-out { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }

/* эффекты появления */
.vp-slide.active.fx-blur   { animation: fx-blur 1.5s cubic-bezier(.2,.7,.2,1) both; }
.vp-slide.active.fx-rotate { animation: fx-rotate 1.4s cubic-bezier(.2,.8,.2,1) both; }
.vp-slide.active.fx-circle { animation: fx-circle 1.5s cubic-bezier(.65,0,.35,1) both; }
.vp-slide.active.fx-slide  { animation: fx-slide 1.3s cubic-bezier(.2,.8,.2,1) both; }
.vp-slide.active.fx-zoom   { animation: fx-zoom 1.3s cubic-bezier(.15,.9,.25,1) both; }
@keyframes fx-blur   { from { opacity: 0; filter: blur(22px) saturate(2); transform: scale(1.18); } to { opacity: 1; filter: none; transform: none; } }
@keyframes fx-rotate { from { opacity: 0; transform: rotate(-7deg) scale(.78); } to { opacity: 1; transform: none; } }
@keyframes fx-circle { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes fx-slide  { from { opacity: 0; transform: translateX(14%) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes fx-zoom   { from { opacity: 0; transform: scale(.55); filter: brightness(2.2); } to { opacity: 1; transform: none; filter: none; } }

.vp-slide.active .kb { animation: kb 9s ease-out both; }
@keyframes kb { from { transform: scale(1.12); } to { transform: scale(1); } }

/* подпись кадра и счётчик */
.vp-caption {
  position: absolute; left: 16px; bottom: 16px; right: 110px; z-index: 7; text-align: left;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px);
  color: #fff; border: 1px solid rgba(255,255,255,0.12);
}
.vp-caption b { display: block; font-size: 0.95rem; }
.vp-caption span { font-size: 0.78rem; color: #cbd5e1; line-height: 1.35; display: block; }
.vp-stage .photo-counter-badge { z-index: 7; }
.vp-stage .fs-nav-btn { width: 40px; height: 40px; font-size: 1.2rem; z-index: 8; opacity: 0; transition: all .2s ease, opacity .25s; }
@media (hover: hover) { .vp-stage:hover .fs-nav-btn { opacity: 1; } }
.vp-stage .fs-prev { left: 12px; }
.vp-stage .fs-next { right: 12px; }
@media (hover: none) {
  .vp-stage .fs-nav-btn { opacity: 0.85; -webkit-tap-highlight-color: transparent; }
  .vp-stage .fs-nav-btn:hover { background: rgba(15, 23, 42, 0.8); color: #fff; border-color: rgba(255,255,255,0.6); box-shadow: 0 2px 8px rgba(0,0,0,0.4); transform: translateY(-50%); }
  .vp-stage .fs-nav-btn:active { background: #fff; color: #0f172a; border-color: #fff; transform: translateY(-50%) scale(1.08); }
}

.vp-show .product-thumbnails { margin-top: 12px; justify-content: center; }
.vp-show .thumb-item { flex: 0 0 64px; height: 64px; background: #150c26; border-radius: 12px; }
.vp-show .thumb-item img { object-fit: contain; padding: 6px; box-sizing: border-box; }
.vp-show .thumb-item img.cover { object-fit: cover; padding: 0; }

/* ── Общие элементы сцен ───────────────────────────────────── */
.vp-slide img { user-select: none; -webkit-user-drag: none; }
.grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
}
.sp { position: absolute; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5)); }
.vp-slide.active .flt { animation: flt 3.4s ease-in-out infinite; }
@keyframes flt { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }

/* 1. Талисман */
.mascot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 40%, transparent 100%);
}
.glow-purple { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(124,58,237,0.55), transparent 65%); filter: blur(10px); }
/* приглушённый талисман-фон кадров 2–5: слой лежит в сцене под кадрами, включается классом .vp-dim (скрипт) */
.stage-mascot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  opacity: 0; filter: saturate(.7) brightness(.75);
  transition: opacity 1.2s ease;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 40%, transparent 100%);
}
.vp-stage.vp-dim .stage-mascot { opacity: .3; }

/* 2. Скриншоты игры: 5 кадров (Screen01, 02, 03, 05, 06) сменяют друг друга растворением */
.shot-frame {
  position: absolute; left: 50%; top: 47%; width: 74%;
  aspect-ratio: 1356 / 870;
  transform: translate(-50%, -50%) perspective(900px) rotateY(-8deg) rotateX(3deg);
  border-radius: 16px; overflow: hidden; border: 5px solid #fff;
  box-shadow: 0 24px 50px rgba(0,0,0,0.6);
}
.shot-frame img { display: block; width: 100%; }
.vp-slide.active .shot-frame { animation: shot-sway 6s ease-in-out infinite alternate; }
@keyframes shot-sway {
  from { transform: translate(-50%, -50%) perspective(900px) rotateY(-9deg) rotateX(3deg); }
  to   { transform: translate(-50%, -50%) perspective(900px) rotateY(9deg)  rotateX(-2deg); }
}
/* стопка скриншотов: в покое виден только первый; смена идёт постоянно (цикл 5 × 1.5 с),
   поэтому при каждом показе кадра 2 продолжается с того места, где остановилась */
.shot-frame img.shot { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.shot-frame img.shot { opacity: 0; animation: shot-cycle 7.5s linear infinite both; }
.shot-frame .shot:nth-child(1) { opacity: 1; }
.shot-frame .shot:nth-child(2) { animation-delay: 1.5s; }
.shot-frame .shot:nth-child(3) { animation-delay: 3s; }
.shot-frame .shot:nth-child(4) { animation-delay: 4.5s; }
.shot-frame .shot:nth-child(5) { animation-delay: 6s; }
@keyframes shot-cycle {
  0%      { opacity: 0; }
  4%      { opacity: 1; }
  20%     { opacity: 1; }
  24%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* 3. Цепная реакция */
.paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.paths path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 10; }
.vp-slide.active .paths path { animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -34; } }
.target { filter: drop-shadow(0 0 14px #4ecdc4) drop-shadow(0 0 4px #4ecdc4); }
.boom { position: absolute; filter: drop-shadow(0 0 16px rgba(255,230,109,0.8)); }
.vp-slide.active .boom { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.12); opacity: 1; } }

/* 4. Карусель скинов */
.ring-wrap { position: absolute; left: 50%; top: 47%; width: 68%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.ring-wrap::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed rgba(78,205,196,0.45); }
.ring { position: absolute; inset: 0; }
.vp-slide.active .ring { animation: spin 26s linear infinite; }
.ring img { position: absolute; width: 20%; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
.vp-slide.active .ring img { animation: spin-rev 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
.ring-center { position: absolute; left: 50%; top: 50%; width: 30%; filter: drop-shadow(0 0 18px rgba(124,58,237,0.9)); }
.vp-slide.active .ring-center { animation: pulse 2.2s ease-in-out infinite; }

/* 5. Взрыв */
.wave { position: absolute; left: 50%; top: 46%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  border: 3px solid rgba(255,230,109,0.8); transform: translate(-50%,-50%) scale(.2); opacity: 0; }
.vp-slide.active .wave { animation: wave 2.4s ease-out infinite; }
.vp-slide.active .wave.w2 { animation-delay: .8s; }
.vp-slide.active .wave.w3 { animation-delay: 1.6s; }
@keyframes wave { 0% { transform: translate(-50%,-50%) scale(.2); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(3.4); opacity: 0; } }
.bomb-core { position: absolute; left: 50%; top: 46%; width: 24%; filter: drop-shadow(0 0 22px rgba(255,193,7,0.85)); }
.vp-slide.active .bomb-core { animation: pulse 1.1s ease-in-out infinite; }
.fly { position: absolute; left: 50%; top: 46%; width: 13%; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
.vp-slide.active .fly { animation: fly 2.6s ease-out infinite; }
@keyframes fly {
  0%   { transform: translate(-50%,-50%) scale(.3) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-mascot { transition: none; }
  .vp-slide, .vp-slide * { animation: none !important; }
  .vp-slide.leaving { opacity: 0; }
}