/* ЦИФРОВОЙ РЕЙС — трёхмерная карточка допуска (14.09.2026)
   Чистый CSS, без правки разметки. Подключается последним. */

.hero-in { perspective: 2000px; perspective-origin: 60% 50%; }

/* ====== САМА КАРТОЧКА ====== */
.hero-card {
  position: relative;
  transform-style: preserve-3d;
  border-radius: 22px;
  padding: clamp(18px, 1.8vw, 26px) clamp(16px, 1.7vw, 24px) clamp(14px, 1.5vw, 20px);
  background:
    linear-gradient(155deg, rgba(255,255,255,.97) 0%, rgba(250,246,240,.94) 52%, rgba(240,234,224,.92) 100%);
  border: 1px solid rgba(255,255,255,.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(28,25,23,.05) inset,
    0 2px 6px rgba(28,25,23,.06),
    0 10px 22px rgba(28,25,23,.09),
    0 26px 54px rgba(28,25,23,.12),
    0 52px 90px rgba(194,120,60,.16);
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1);
}

/* покой: лёгкий разворот в пространстве */
@media (min-width: 1001px) {
  .hero-card:not(.on) { transform: rotateY(-3deg) rotateX(1.5deg); }
}

/* стеклянный блик по верхней грани */
.hero-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.2) 22%, transparent 46%);
  z-index: 2;
}

/* теневые слои позади — стопка карточек */

/* ====== СТРОКИ СТАТУСОВ ====== */
.hero-card .hc-row {
  position: relative; z-index: 1;
  padding: clamp(11px, 1.1vw, 15px) 4px;
  border-bottom: 1px solid rgba(28,25,23,.07);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease;
  border-radius: 10px;
}
.hero-card .hc-row:hover {
  background: linear-gradient(90deg, rgba(194,120,60,.07), rgba(194,120,60,0));
  transform: translateZ(22px) translateX(4px);
}
.hero-card .hc-row:last-of-type { border-bottom: none; }
.hero-card .hc-row span { font-weight: 500; }

/* первая строка — главный статус */
.hero-card .hc-row:first-child {
  background: linear-gradient(90deg, rgba(22,163,74,.1), rgba(22,163,74,0));
  margin-bottom: 4px;
}
.hero-card .hc-row:first-child span { font-weight: 800; font-size: 1.05em; }

/* ====== ПИЛЮЛИ СТАТУСОВ — ОБЪЁМ ====== */
.hero-card .hc-row b {
  transform: translateZ(14px);
  padding: 6px 13px;
  border-radius: 22px;
  letter-spacing: .5px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.hero-card .hc-row b.ok {
  background: linear-gradient(180deg, #e8fdf0 0%, #bff0d2 100%);
  color: #15803d;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 #8fd0a8, 0 5px 12px rgba(22,163,74,.28);
}
.hero-card .hc-row b.warn {
  background: linear-gradient(180deg, #fef5e8 0%, #fbdcac 100%);
  color: #b45309;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 #e0b271, 0 5px 12px rgba(194,120,60,.3);
}
.hero-card .hc-row b.bad {
  background: linear-gradient(180deg, #fef2f2 0%, #fcbdbd 100%);
  color: #b91c1c;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 #e79a9a, 0 5px 12px rgba(220,38,38,.28);
  animation: hcAlert 2.6s ease-in-out infinite;
}
@keyframes hcAlert {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 #e79a9a, 0 5px 12px rgba(220,38,38,.28); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 0 #e79a9a, 0 8px 22px rgba(220,38,38,.5); }
}
.hero-card .hc-row:hover b { transform: translateZ(30px) scale(1.05); }

/* ====== ПОДВАЛ КАРТОЧКИ ====== */
.hero-card .hc-foot {
  position: relative; z-index: 1;
  margin-top: 14px; padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(28,25,23,.045), rgba(28,25,23,.02));
  box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(0,0,0,.05) inset;
  transform: translateZ(10px);
  font-weight: 600;
}

/* ====== ЖИВОЙ ИНДИКАТОР ====== */
.hero-card .live-dot { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }

/* ====== ШИЛЬДИК СВЕРХУ ====== */
.hero-card .hc-row:first-child::after {
  content: 'online';
  position: absolute; top: -14px; right: -10px;
  padding: 4px 11px; border-radius: 20px;
  background: linear-gradient(180deg, #e09558, #a86628);
  color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  box-shadow: 0 2px 0 #7a4a1c, 0 6px 16px rgba(194,120,60,.45);
  transform: translateZ(34px) rotate(3deg);
  z-index: 3;
}

@media (max-width: 1000px) {
  .hero-card { transform: none !important; }
  .hero-card::after { display: none; }
  .hero-card .hc-row:first-child::after { top: -10px; right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card, .hero-card .hc-row, .hero-card .hc-row b { transition: none; animation: none; transform: none !important; }
}

/* Аккуратные границы и запас места под шильдик */
.hero-card { overflow: visible; margin-top: 14px; }
.hero-card .hc-row { overflow: visible; }
.hero-card .hc-row:first-child { border-radius: 10px; }
.hero-card .hc-row b { white-space: nowrap; }