/* ---------- Главный экран ---------- */
html, body { overflow: hidden; background: var(--data-blue); }
body.idle { cursor: none; }

.stage {
  position: fixed;
  inset: 0;
  padding: 2.4vmin;
  background:
    radial-gradient(120vmax 80vmax at 50% 0%, #0f3a52 0%, transparent 60%),
    linear-gradient(180deg, #0b2b3c 0%, var(--data-blue) 100%);
}

/* картинная рамка: красный багет со скошенными углами */
.frame {
  --moulding: 3.4vmin;
  position: relative;
  width: 100%;
  height: 100%;
  border: var(--moulding) solid;
  border-color: #f0545a #c23840 #a02e36 #de4a52;
  background: var(--server-grey);
  box-shadow:
    0 2.4vmin 7vmin rgba(0, 0, 0, 0.6),
    0 0 0 0.25vmin rgba(255, 255, 255, 0.18),
    inset 0 0 0 0.3vmin rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
}
/* внутренний «бортик» багета */
.frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 0.35vmin rgba(255, 255, 255, 0.35), inset 0 0 1.6vmin rgba(9, 36, 51, 0.5);
  z-index: 3;
}

/* паспарту */
.mat {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 2.4vmin 2.4vmin 0;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 40%),
    var(--server-grey);
}

.canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(#d3d9dd 0.1vmin, transparent 0.16vmin) 0 0 / 2.2vmin 2.2vmin,
    radial-gradient(120% 90% at 50% 40%, #ffffff 40%, #f1f4f5 100%);
  box-shadow:
    inset 0 0.5vmin 1.4vmin rgba(9, 36, 51, 0.35),
    inset 0 0 0 0.3vmin rgba(9, 36, 51, 0.45),
    0 0 0 0.3vmin #fff;
}

/* табличка */
.plaque {
  flex: none;
  height: 8.2vmin;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2vmin;
  color: var(--data-blue);
}
.plaque .logo { height: 2.8vmin; justify-self: start; }
.plaque .title {
  font-weight: 800;
  font-size: 2.6vmin;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 1.4vmin;
  white-space: nowrap;
}
.plaque .title i {
  width: 1.1vmin;
  height: 1.1vmin;
  background: var(--signal-red);
  display: block;
}
.plaque .count {
  justify-self: end;
  font-weight: 700;
  font-size: 2.1vmin;
  color: var(--blue-3);
  white-space: nowrap;
}
.plaque .count b { color: var(--signal-red); font-weight: 800; font-size: 2.6vmin; }

/* пустое состояние */
.empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.6vmin;
  color: var(--blue-3);
  transition: opacity 0.5s;
  pointer-events: none;
}
.empty.hidden { opacity: 0; }
.empty b { font-size: 4.4vmin; font-weight: 800; color: var(--data-blue); letter-spacing: 0.02em; }
.empty span { font-size: 2.4vmin; font-weight: 500; }
.empty .px {
  justify-self: center;
  width: 9vmin;
  height: 7vmin;
  border: 0.6vmin dashed var(--signal-red);
  animation: k-bob 2.2s ease-in-out infinite;
}

/* ---------- плитки ---------- */
.tile {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}
.tile.nomove { transition: none; }

.mover {
  position: absolute;
  inset: 0;
  animation: k-sway var(--dur, 5s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes k-sway {
  from { transform: rotate(-3.5deg) translateY(-1.5%); }
  to { transform: rotate(3.5deg) translateY(1.5%); }
}
.art { position: absolute; inset: 0; }
.layer {
  position: absolute;
  inset: 0;
  background: var(--img) center / 100% 100% no-repeat;
}
.deco { position: absolute; pointer-events: none; }

/* появление новой работы */
.tile.fresh { z-index: 5; }
.tile.fresh .art { animation: k-pop 1.3s cubic-bezier(0.2, 1.3, 0.35, 1) both; }
.tile.fresh::before {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(235, 66, 71, 0.32), rgba(235, 66, 71, 0) 65%);
  animation: k-glow 4.5s ease-out both;
  z-index: -1;
}
.tile.fresh::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0.5vmin solid var(--signal-red);
  animation: k-ring 1.5s ease-out 0.15s both;
  z-index: 2;
}
.tile.boot .art { animation: k-fade 0.7s ease-out both; animation-delay: var(--i, 0s); }
.tile.leave .art { animation: k-out 0.45s ease-in both; }

@keyframes k-pop {
  0% { transform: scale(0.1) rotate(-14deg); opacity: 0; }
  55% { transform: scale(1.14) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes k-glow { 0% { opacity: 0; transform: scale(0.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes k-ring { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes k-fade { from { opacity: 0; transform: translateY(2%); } to { opacity: 1; transform: none; } }
@keyframes k-out { to { opacity: 0; transform: scale(0.3) rotate(10deg); } }
@keyframes k-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2vmin); } }

/* ---------- анимации раскрасок ---------- */
.layer, .deco { animation-delay: var(--d, 0s); }

/* 1. Маяк: луч, волны, огонь в фонаре */
.a-1-beam { animation: k-beam 3.4s ease-in-out infinite; }
.a-1-waveA { animation: k-waveA 2.8s ease-in-out infinite alternate; }
.a-1-waveB { animation: k-waveA 3.3s ease-in-out infinite alternate-reverse; }
.a-1-glow {
  background: radial-gradient(circle, rgba(255, 205, 60, 0.95) 0, rgba(255, 205, 60, 0.45) 28%, rgba(255, 205, 60, 0) 64%);
  mix-blend-mode: multiply;
  animation: k-lamp 1.9s ease-in-out infinite;
}
@keyframes k-beam {
  0%, 100% { opacity: 0.22; transform: scale(0.96); }
  45% { opacity: 1; transform: scale(1.03); }
}
@keyframes k-waveA { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
@keyframes k-lamp { 0%, 100% { opacity: 0.1; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.35); } }

/* 2. Книги: парят и перелистываются */
.a-2-bookL { animation: k-floatA 4.2s ease-in-out infinite; }
.a-2-bookR { animation: k-floatB 4.8s ease-in-out infinite; }
@keyframes k-floatA {
  0%, 100% { transform: translate(0, 0) rotate(-1.8deg); }
  50% { transform: translate(1.2%, -3.2%) rotate(2.2deg); }
}
@keyframes k-floatB {
  0%, 100% { transform: translate(0, -1.5%) rotate(1.6deg); }
  50% { transform: translate(-1.4%, 2.6%) rotate(-2.4deg); }
}

/* 3. Процессор: ядро пульсирует, контакты «дышат» */
.a-3-base { animation: k-breathe 2.6s ease-in-out infinite; }
.a-3-core { animation: k-pulse 1.3s ease-in-out infinite; }
.a-3-pinsT { animation: k-pinsV 1.7s ease-in-out infinite; --m: -1.8%; }
.a-3-pinsB { animation: k-pinsV 1.7s ease-in-out infinite; --m: 1.8%; animation-delay: calc(var(--d, 0s) - 0.4s); }
.a-3-pinsL { animation: k-pinsH 1.9s ease-in-out infinite; --m: -1.4%; animation-delay: calc(var(--d, 0s) - 0.2s); }
.a-3-pinsR { animation: k-pinsH 1.9s ease-in-out infinite; --m: 1.4%; animation-delay: calc(var(--d, 0s) - 0.7s); }
@keyframes k-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.014); } }
@keyframes k-pulse { 0%, 100% { transform: scale(0.97); } 50% { transform: scale(1.1); } }
@keyframes k-pinsV { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--m)); } }
@keyframes k-pinsH { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--m)); } }

/* 4. Дверь: распахивается и закрывается */
.a-4-door { animation: k-door 5.2s ease-in-out infinite; }
@keyframes k-door {
  0%, 8% { transform: perspective(1300px) rotateY(0deg); }
  42%, 58% { transform: perspective(1300px) rotateY(-52deg); }
  92%, 100% { transform: perspective(1300px) rotateY(0deg); }
}

/* 5. Тирекс: дышит, виляет хвостом, рабочие подпрыгивают */
.a-5-base { animation: k-dino 2.8s ease-in-out infinite; }
.a-5-tail { animation: k-wag 1.5s ease-in-out infinite alternate; }
.a-5-w1 { animation: k-hop 1.2s ease-in-out infinite; }
.a-5-w2 { animation: k-hop 1.2s ease-in-out infinite; animation-delay: calc(var(--d, 0s) - 0.45s); }
@keyframes k-dino {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(0.996, 1.022); }
}
@keyframes k-wag { from { transform: rotate(-4.5deg); } to { transform: rotate(5.5deg); } }
@keyframes k-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.04, 0.95); }
  50% { transform: translateY(-4.5%) scale(0.98, 1.03); }
  82% { transform: translateY(0) scale(1, 1); }
}

/* 6. Пульт: стрелки, экран, лампочки, джойстик */
.a-6-dial1 { animation: k-dial 3.2s ease-in-out infinite alternate; }
.a-6-dial2 { animation: k-dial 2.6s ease-in-out infinite alternate-reverse; }
.a-6-dial3 { animation: k-dial 2.9s ease-in-out infinite alternate-reverse; }
.a-6-dial4 { animation: k-dial 3.6s ease-in-out infinite alternate; }
.a-6-screen { animation: k-flicker 2.6s steps(1) infinite; }
.a-6-digits { animation: k-blink 1.3s steps(1) infinite; }
.a-6-btn1 { animation: k-blink 1.6s steps(1) infinite; }
.a-6-btn2 { animation: k-blink 1.6s steps(1) infinite; animation-delay: calc(var(--d, 0s) - 0.4s); }
.a-6-btn3 { animation: k-blink 1.6s steps(1) infinite; animation-delay: calc(var(--d, 0s) - 0.8s); }
.a-6-btn4 { animation: k-blink 1.6s steps(1) infinite; animation-delay: calc(var(--d, 0s) - 1.2s); }
.a-6-stick { animation: k-stick 2.3s ease-in-out infinite alternate; }
.a-6-scan { overflow: hidden; background: linear-gradient(0deg, rgba(9, 36, 51, 0.09) 50%, transparent 50%) 0 0 / 100% 7%; }
.a-6-scan::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  top: -22%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: k-sweep 2.8s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes k-dial { from { transform: rotate(-32deg); } to { transform: rotate(38deg); } }
@keyframes k-flicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.75; } 10% { opacity: 1; } 56% { opacity: 0.6; } 58% { opacity: 1; } 80% { opacity: 0.85; } 82% { opacity: 1; } }
@keyframes k-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.3; } }
@keyframes k-stick { from { transform: rotate(-13deg); } to { transform: rotate(15deg); } }
@keyframes k-sweep { to { top: 100%; } }

/* упрощённый режим (включается автоматически, если экран не тянет) */
.lite .deco { display: none; }
.lite [class*='a-6-btn'], .lite .a-6-digits, .lite .a-6-screen, .lite [class*='a-3-pins'], .lite .a-1-waveB { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .layer, .deco, .deco::after, .mover { animation: none !important; }
}