/* demo-fx.css — анимационный слой демо RentFlow (чистый CSS, без библиотек) */

/* каскадное появление панелей и плиток */
@keyframes demoFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel, .tile, .req, .car { animation: demoFadeUp .45s ease-out both; }
.tile:nth-child(1)  { animation-delay: .02s; } .tile:nth-child(2)  { animation-delay: .07s; }
.tile:nth-child(3)  { animation-delay: .12s; } .tile:nth-child(4)  { animation-delay: .17s; }
.tile:nth-child(5)  { animation-delay: .22s; } .tile:nth-child(6)  { animation-delay: .27s; }
.tile:nth-child(7)  { animation-delay: .32s; } .tile:nth-child(8)  { animation-delay: .37s; }
.panel:nth-of-type(2) { animation-delay: .08s; }
.panel:nth-of-type(3) { animation-delay: .16s; }
.panel:nth-of-type(4) { animation-delay: .24s; }

/* бары растут слева направо */
@keyframes demoGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.bar, .seg { transform-origin: left center; animation: demoGrow .7s cubic-bezier(.2,.7,.3,1) both; }
.barrow:nth-child(2) .bar, .barrow:nth-child(2) .seg { animation-delay: .05s; }
.barrow:nth-child(3) .bar, .barrow:nth-child(3) .seg { animation-delay: .10s; }
.barrow:nth-child(4) .bar, .barrow:nth-child(4) .seg { animation-delay: .15s; }
.barrow:nth-child(5) .bar, .barrow:nth-child(5) .seg { animation-delay: .20s; }
.barrow:nth-child(6) .bar, .barrow:nth-child(6) .seg { animation-delay: .25s; }

/* плитки и карточки чуть приподнимаются под курсором */
.tile, .req { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.tile:hover, .req:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(14,60,45,.10); }

/* пульс просроченного SLA — притягивает взгляд */
@keyframes demoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208,59,59,.35); }
  50%      { box-shadow: 0 0 0 7px rgba(208,59,59,0); }
}
.req.overdue { animation: demoFadeUp .45s ease-out both, demoPulse 1.8s ease-in-out .6s infinite; }
.st-overdue, .stchip.st-overdue { animation: demoPulse 1.8s ease-in-out infinite; border-radius: 20px; }

/* появление сообщений чата */
@keyframes demoMsg { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.msg { animation: demoMsg .3s ease-out both; }

/* строки шахматки заполняются волной */
.grid tr { animation: demoFadeUp .4s ease-out both; }
.grid tr:nth-child(2) { animation-delay: .04s; } .grid tr:nth-child(3) { animation-delay: .08s; }
.grid tr:nth-child(4) { animation-delay: .12s; } .grid tr:nth-child(5) { animation-delay: .16s; }
.grid tr:nth-child(6) { animation-delay: .20s; } .grid tr:nth-child(7) { animation-delay: .24s; }
.grid tr:nth-child(8) { animation-delay: .28s; } .grid tr:nth-child(9) { animation-delay: .32s; }

/* плавающая плашка демо-режима */
#demoBadge {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: rgba(23,63,52,.94); color: #dff0ea; backdrop-filter: blur(4px);
  font: 12px/1.3 system-ui, sans-serif; padding: 8px 12px; border-radius: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: demoFadeUp .6s .4s ease-out both;
}
#demoBadge a, #demoBadge button {
  font: inherit; color: #9fe3c9; background: none; border: none; cursor: pointer;
  text-decoration: none; padding: 0;
}
#demoBadge a:hover, #demoBadge button:hover { color: #fff; text-decoration: underline; }
#demoBadge .dot { width: 7px; height: 7px; border-radius: 50%; background: #35d08f; animation: demoPulse 2s infinite; }
#demoBadge .txt-s { display: none; }
@media (max-width: 520px) {
  #demoBadge .txt { display: none; }
  #demoBadge .txt-s { display: inline; }
  #demoBadge { right: 10px; bottom: 10px; padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .tile, .req, .car, .bar, .seg, .msg, .grid tr, #demoBadge { animation: none !important; }
}