/* animations.css — global motion & polish pass for VELESIT portal + admin.
   SAFETY: entrance animations are TRANSFORM-ONLY (never animate opacity on
   persistent containers) so content is always visible even if an animation is
   frozen (background tab, print/PDF, reduced-render). Entrances are gated behind
   prefers-reduced-motion: no-preference so reduced-motion users get the resting
   (un-transformed, fully visible) state. Hover/press transitions are always on. */

:root {
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   HOVER / PRESS MICRO-INTERACTIONS  (always active, no opacity risk)
   ============================================================ */
.anav { transition: background .18s, color .18s, transform .18s var(--ease-spring); }
.anav:hover { transform: translateX(4px); }
.anav svg { transition: transform .2s var(--ease-spring), filter .2s; }
.anav:hover svg { transform: scale(1.12); filter: drop-shadow(0 0 6px rgba(94, 210, 156, .55)); }
.anav.active svg { color: var(--brand); }

.acontent .card { transition: border-color .22s, transform .22s var(--ease-spring), box-shadow .22s; }

.adash-stats .card { position: relative; overflow: hidden; }
.adash-stats .card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brand), transparent); transition: width .35s var(--ease-out);
}
.adash-stats .card:hover::after { width: 100%; }
.adash-stats .card svg { transition: transform .25s var(--ease-spring); }
.adash-stats .card:hover svg { transform: rotate(8deg) scale(1.12); }

.atbl tbody tr td { transition: background .15s, color .15s; }

.abtn { transition: transform .16s var(--ease-spring), filter .16s, background .16s, border-color .16s, box-shadow .16s; }
.abtn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.abtn:active { transform: scale(.95); }
.aicon-btn { transition: transform .16s var(--ease-spring), color .15s, border-color .15s, background .15s; }
.aicon-btn:hover { transform: translateY(-1px); }
.aicon-btn:active { transform: scale(.9); }
.aicon-btn svg { transition: transform .18s var(--ease-spring); }
.aicon-btn:hover svg { transform: scale(1.14); }

.btn { transition: transform .16s var(--ease-spring), filter .16s, background .16s, border-color .16s, box-shadow .18s; }
.btn-green:hover, .btn-green-ghost:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.95); }

.sb-logo img, .aheader img { transition: transform .3s var(--ease-spring), filter .3s; }
.sb-logo:hover img { transform: rotate(-6deg) scale(1.08); }

[data-no-i18n] button { transition: all .16s var(--ease-spring); }
[data-no-i18n] button:active { transform: scale(.92); }

/* ============================================================
   ENTRANCE ANIMATIONS — TRANSFORM-ONLY, gated on reduced-motion.
   Resting state (when not running / reduced motion) is fully visible.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* page-level slide (no opacity → never hides content) */
  .acontent { animation: aPageIn .45s var(--ease-out); }
  @keyframes aPageIn { from { transform: translateY(12px); } to { transform: none; } }

  .content { animation: aContentIn .42s var(--ease-out); }
  @keyframes aContentIn { from { transform: translateY(10px); } to { transform: none; } }

  .aheader { animation: aHeaderIn .5s var(--ease-out); }
  @keyframes aHeaderIn { from { transform: translateY(-12px); } to { transform: none; } }

  .acontent > h1 { animation: aTitleIn .5s var(--ease-out) backwards; }
  @keyframes aTitleIn { from { transform: translateX(-18px); } to { transform: none; } }

  /* sidebar nav stagger */
  .asidebar .anav { animation: aNavIn .5s var(--ease-out) backwards; }
  .asidebar .anav:nth-of-type(1) { animation-delay: .02s; }
  .asidebar .anav:nth-of-type(2) { animation-delay: .05s; }
  .asidebar .anav:nth-of-type(3) { animation-delay: .08s; }
  .asidebar .anav:nth-of-type(4) { animation-delay: .11s; }
  @keyframes aNavIn { from { transform: translateX(-10px); } to { transform: none; } }
  .anav.active::before { animation: aBorderPop .26s var(--ease-spring); }
  @keyframes aBorderPop { from { transform: translateY(-50%) scaleY(0); } to { transform: translateY(-50%) scaleY(1); } }

  /* card reveal — translate only, staggered */
  .acontent .card { animation: aCardIn .5s var(--ease-out) backwards; }
  .acontent > .card:nth-child(1) { animation-delay: .04s; }
  .acontent > .card:nth-child(2) { animation-delay: .10s; }
  .acontent > .card:nth-child(3) { animation-delay: .16s; }
  .acontent > .card:nth-child(4) { animation-delay: .22s; }
  .acontent > .card:nth-child(5) { animation-delay: .28s; }
  .adash-stats > .card:nth-child(1) { animation-delay: .05s; }
  .adash-stats > .card:nth-child(2) { animation-delay: .11s; }
  .adash-stats > .card:nth-child(3) { animation-delay: .17s; }
  .adash-stats > .card:nth-child(4) { animation-delay: .23s; }
  .adash-stats > .card:nth-child(5) { animation-delay: .29s; }
  .adash-2col > .card:nth-child(1) { animation-delay: .08s; }
  .adash-2col > .card:nth-child(2) { animation-delay: .16s; }
  .adetail-grid > .card:nth-child(2) { animation-delay: .10s; }
  .adetail-grid > .card:nth-child(3) { animation-delay: .16s; }
  @keyframes aCardIn { from { transform: translateY(16px) scale(.99); } to { transform: none; } }

  /* stat-card hover lift (CSS; admin stat cards don't use JS hover) */
  .adash-stats .card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -18px rgba(0, 0, 0, .55); }

  /* table rows — translate stagger */
  .atbl tbody tr { animation: aRowIn .42s var(--ease-out) backwards; }
  .atbl tbody tr:nth-child(1) { animation-delay: .04s; }
  .atbl tbody tr:nth-child(2) { animation-delay: .07s; }
  .atbl tbody tr:nth-child(3) { animation-delay: .10s; }
  .atbl tbody tr:nth-child(4) { animation-delay: .13s; }
  .atbl tbody tr:nth-child(5) { animation-delay: .16s; }
  .atbl tbody tr:nth-child(6) { animation-delay: .19s; }
  .atbl tbody tr:nth-child(7) { animation-delay: .22s; }
  .atbl tbody tr:nth-child(8) { animation-delay: .25s; }
  .atbl tbody tr:nth-child(9) { animation-delay: .28s; }
  .atbl tbody tr:nth-child(10) { animation-delay: .31s; }
  @keyframes aRowIn { from { transform: translateY(7px); } to { transform: none; } }
}