/* ═══════════════════ devvista v2 · MOTION ═══════════════════
   Site-wide animation layer. Loaded LAST in <head>, after
   dv2-chrome.css, on both layouts.

   Rules here only touch animation / transition / pseudo-element
   properties. Reveal offsets use the independent `translate`
   property, so the legacy !important transforms in
   scripts.html / dv2-chrome can never fight the reveals.
   ══════════════════════════════════════════════════════════ */

/* ── 0. TOKENS ── */
:root {
  --dv-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dv-dur-fast:  0.22s;
  --dv-dur:       0.55s;
  --dv-dur-slow:  0.9s;
  --dv-rise:      20px;
  --dv-mx:        50%;
  --dv-my:        50%;
}

/* keep the drawing order sane for the negative-z backdrop layers */
body { isolation: isolate; }

/* ── 1. PAGE ENTER ─────────────────────────────────────────
   Every app page animates its first blocks in, no markup change. */
@keyframes dvEnterUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dvPaneIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.app-view-container > .container-fluid > *,
.app-view-container > main > .container-fluid > * {
  animation: dvEnterUp 0.55s var(--dv-ease) both;
}
.app-view-container .container-fluid > *:nth-child(2) { animation-delay: 0.07s; }
.app-view-container .container-fluid > *:nth-child(3) { animation-delay: 0.14s; }
.app-view-container .container-fluid > *:nth-child(4) { animation-delay: 0.21s; }
.app-view-container .container-fluid > *:nth-child(5) { animation-delay: 0.28s; }
.app-view-container .container-fluid > *:nth-child(n+6) { animation-delay: 0.34s; }

/* the same choreography for the fullscreen/public layouts */
@keyframes dvEnterFade {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}

/* leaving fade — dv2.js adds .dv-leaving on same-origin clicks */
body.dv-leaving .app-view-container { opacity: 0.35; transition: opacity 0.16s ease; }

/* ── 2. AURORA BACKDROP + SCROLL RAIL (injected by dv2.js) ── */
.dv-aurora {
  position: fixed;
  inset: -25vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vmax 32vmax at 16% 10%, rgba(138, 21, 56, 0.22), transparent 60%),
    radial-gradient(32vmax 30vmax at 84% 82%, rgba(224, 92, 126, 0.13), transparent 62%),
    radial-gradient(28vmax 24vmax at 66% 22%, rgba(110, 16, 48, 0.20), transparent 66%);
  animation: dvDrift 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes dvDrift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
}
/* hairline grid, masked so it only breathes behind the top third */
.dv-aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(245, 230, 211, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 230, 211, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 28%, #000 10%, transparent 78%);
  mask-image: radial-gradient(72% 62% at 50% 28%, #000 10%, transparent 78%);
}

.dv-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1200;
  pointer-events: none;
  background: rgba(245, 230, 211, 0.04);
}
.dv-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--dv-accent), var(--dv-accent-l2), var(--dv-accent-l3));
  box-shadow: 0 0 12px rgba(224, 92, 126, 0.45);
  transition: transform 0.12s linear;
}

/* ── 3. REVEAL SYSTEM ──────────────────────────────────────
   dv2.js tags structures with .dv-rise and adds .dv-in once.
   Reveals are ANIMATIONS, not transitions: an animation starts
   from its own keyframe state, so a delayed reveal can never
   flash the element visible first (transitions resolve against
   the previously computed value, which caused exactly that). */
@keyframes dvRise {
  from { opacity: 0; translate: var(--dv-dx, 0px) var(--dv-dy, 20px); scale: var(--dv-s, 1); }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
.dv-rise {
  --dv-dx: 0px;
  --dv-dy: 20px;
  --dv-s: 1;
  opacity: 0;
  translate: var(--dv-dx) var(--dv-dy);
  scale: var(--dv-s);
}
.dv-rise.dv-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  animation: dvRise var(--dv-dur) var(--dv-ease) var(--dv-d, 0s) both;
}
.dv-rise.dv-from-left  { --dv-dx: -18px; --dv-dy: 0px; }
.dv-rise.dv-from-right { --dv-dx: 18px;  --dv-dy: 0px; }
.dv-rise.dv-pop        { --dv-dy: 10px;  --dv-s: 0.97; }

/* opt-out hook */
[data-dv-static] { animation: none !important; transition: none !important; }

/* ── 4. CARD SPOTLIGHT (Maximum) ───────────────────────────
   dv2.js tracks the pointer and sets --dv-mx/--dv-my. */
.card,
.rm-card,
.dl-repo-card,
.forge-panel,
.gd-card,
.gd-card-body,
.vital,
.gd-vital,
.dl-stat,
.danger-row,
.owner-stat-card,
.kpi-tile,
.dv-fact-card,
.dv-perk-card,
.dv-bento-card,
.dv-faq-item,
.dv-pillar {
  position: relative;
}
.card.dv-spot::after,
.rm-card.dv-spot::after,
.dl-repo-card.dv-spot::after,
.forge-panel.dv-spot::after,
.gd-card.dv-spot::after,
.owner-stat-card.dv-spot::after,
.dv-fact-card.dv-spot::after,
.dv-perk-card.dv-spot::after,
.dv-bento-card.dv-spot::after,
.dv-faq-item.dv-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px 260px at var(--dv-mx) var(--dv-my),
              rgba(224, 92, 126, 0.12), rgba(138, 21, 56, 0.05) 45%, transparent 72%);
  transition: opacity 0.35s ease;
}
.card.dv-spot:hover::after,
.rm-card.dv-spot:hover::after,
.dl-repo-card.dv-spot:hover::after,
.forge-panel.dv-spot:hover::after,
.gd-card.dv-spot:hover::after,
.owner-stat-card.dv-spot:hover::after,
.dv-fact-card.dv-spot:hover::after,
.dv-perk-card.dv-spot:hover::after,
.dv-bento-card.dv-spot:hover::after,
.dv-faq-item.dv-spot:hover::after {
  opacity: 1;
}

/* ── 5. SCROLL PARALLAX HOOK ── */
.dv-parallax { will-change: transform; }

/* ── 6. BUTTONS · PRESS + SHIMMER + ICON NUDGE ── */
.btn,
.dv-btn,
.forge-btn,
.forge-apply,
.dl-btn,
.dl-iconbtn,
.cx-toolbtn,
.cx-copy,
.gd-quick a,
.gd-actions a,
.dv-topbar-link,
.dv-social-pill {
  transition:
    transform var(--dv-dur-fast) var(--dv-ease),
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}
.btn:active,
.dv-btn:active,
.forge-btn:active,
.forge-apply:active,
.dl-btn:active,
.dl-iconbtn:active,
.cx-toolbtn:active,
.cx-copy:active,
.gd-quick a:active,
.gd-actions a:active {
  transform: translateY(1px) scale(0.97);
}
.btn:hover i,
.dv-btn:hover i,
.forge-btn:hover i,
.forge-apply:hover i,
.dl-btn:hover i,
.cx-toolbtn:hover i,
.gd-quick a:hover i,
.gd-actions a:hover i,
.dv-social-pill:hover i {
  transform: translateX(2px) scale(1.04);
}
.btn i, .dv-btn i, .forge-btn i, .forge-apply i, .dl-btn i,
.cx-toolbtn i, .gd-quick a i, .gd-actions a i, .dv-social-pill i {
  transition: transform 0.25s var(--dv-ease), color 0.22s ease;
}

/* slow light sweep across our own buttons */
.dv-btn { position: relative; overflow: hidden; }
.dv-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--dv-ease);
}
.dv-btn:hover::after { left: 115%; }

/* ── 7. CHIPS · POP + GLOW ── */
.cx-chip,
.cx-cmd,
.cx-mod-count,
.cx-results-chip,
.rg-count,
.cp-count,
.badge,
.deck-id,
.gd-gid,
.rm-id,
.vital,
.gd-vital,
.dl-stat,
.kpi-tile {
  transition:
    transform var(--dv-dur-fast) var(--dv-ease),
    border-color 0.22s ease,
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}
.cx-chip:hover,
.cx-cmd:hover,
.vital:hover,
.gd-vital:hover,
.dl-stat:hover,
.rg-count:hover,
.badge:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(138, 21, 56, 0.28);
}

/* ── 8. INPUTS · FOCUS RING PULSE (outline is untouched elsewhere) ── */
@keyframes dvFocusPulse {
  0%   { outline-color: var(--dv-accent-35); outline-offset: 0; }
  100% { outline-color: transparent; outline-offset: 4px; }
}
.form-control:focus,
.form-select:focus,
textarea:focus,
input[type=text]:focus,
input[type=search]:focus,
select:focus,
.choices.is-focused .choices__inner {
  outline: 2px solid transparent;
  animation: dvFocusPulse 0.6s var(--dv-ease);
}

/* ── 9. REGISTRY / DETAILS ── */
.rg-row,
.cx-reg-mod,
.dv-faq-item {
  position: relative;
}
.rg-row::before,
.cx-reg-mod::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--dv-accent-l3), var(--dv-accent));
  transform: scaleY(0.08);
  transform-origin: 50% 0;
  opacity: 0;
  transition: transform 0.35s var(--dv-ease), opacity 0.3s ease;
}
.rg-row:hover::before,
.cx-reg-mod:hover::before,
.rg-row[open]::before,
.cx-reg-mod[open]::before {
  transform: scaleY(1);
  opacity: 1;
}
.rg-chev,
.cx-chev,
.cx-caret,
.rg-sum,
.cx-reg-mod > summary {
  transition: transform 0.28s var(--dv-ease), color 0.22s ease, background-color 0.22s ease;
}
details[open] > summary .cx-chev { transform: rotate(90deg); color: var(--dv-accent-l3); }
details[open] > .rg-body,
details[open] > .cx-grid,
details[open] > .cx-drawer,
details[open] > .cx-cmds {
  animation: dvPaneIn 0.34s var(--dv-ease) both;
}
.rg-row:hover,
.cx-reg-mod:hover {
  border-color: rgba(232, 92, 126, 0.35) !important;
}

/* ── 10. TABS & PANES ── */
.nav-pills:not(.flex-column) .nav-link,
.admin-tabs .nav-link,
.gd-tabs .nav-link {
  position: relative;
}
.nav-pills:not(.flex-column) .nav-link::before,
.admin-tabs .nav-link::before,
.gd-tabs .nav-link::before {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 4px;
  height: 1.5px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--dv-accent-l2), transparent);
  transform: scaleX(0);
  transition: transform 0.3s var(--dv-ease);
}
.nav-pills:not(.flex-column) .nav-link:hover::before,
.admin-tabs .nav-link:hover::before,
.gd-tabs .nav-link:hover::before { transform: scaleX(0.65); }
.nav-pills:not(.flex-column) .nav-link.active::before,
.admin-tabs .nav-link.active::before,
.gd-tabs .nav-link.active::before { transform: scaleX(1); }

.tab-pane.active,
.dv-pane-in { animation: dvPaneIn 0.34s var(--dv-ease) both; }

/* ── 11. TABLES / DENSE ROWS ── */
table tbody tr,
.table tbody tr,
.server-row,
.cx-aliases .cx-alias,
.gd-rows > * {
  transition: background-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease;
}
table tbody tr:hover,
.table tbody tr:hover {
  background-color: rgba(138, 21, 56, 0.10) !important;
  box-shadow: inset 3px 0 0 var(--dv-accent-l1);
}
.server-row:hover { box-shadow: inset 3px 0 0 var(--dv-accent-l1); }

/* ── 12. NAV · SIDEBAR · FOOTER ── */
.dv-links a.dv-link { position: relative; }
.dv-links a.dv-link::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.3rem;
  height: 1.5px;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--dv-accent-l2), var(--dv-accent-l3));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.28s var(--dv-ease);
}
.dv-links a.dv-link:hover::after,
.dv-links a.dv-link.active::after { transform: scaleX(1); }

.dv-side .nav-link i,
.dv-side .nav-link .icon {
  transition: transform 0.25s var(--dv-ease), color 0.22s ease;
}
.dv-side .nav-link:hover i { transform: translateX(2px) scale(1.06); }
@keyframes dvSideGlow {
  0%, 100% { box-shadow: inset 3px 0 0 var(--dv-accent-l1), 0 0 0 rgba(138, 21, 56, 0); }
  50%      { box-shadow: inset 3px 0 0 var(--dv-accent-l3), 0 6px 18px rgba(138, 21, 56, 0.28); }
}
.dv-side .nav-link.active { animation: dvSideGlow 3.8s ease-in-out infinite; }

.dv-dd-item,
.dv-dd-single {
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.dv-dd-item i,
.dv-dd-single i { transition: transform 0.22s var(--dv-ease), color 0.18s ease; }
.dv-dd-item:hover i { transform: translateX(2px) scale(1.05); }
.dv-dd-single:hover i { transform: scale(1.08); }
.dv-footer-links a { transition: color 0.2s ease, transform 0.2s var(--dv-ease); display: inline-block; }
.dv-footer-links a:hover { transform: translateY(-1px); }

/* ── 13. MENUS · MODALS · NOTIFICATIONS ── */
@keyframes dvToastIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.dropdown-menu.show { animation: dvToastIn 0.22s var(--dv-ease) both; }
.modal.show .modal-dialog { animation: dvToastIn 0.3s var(--dv-ease) both; }
.alert { animation: dvToastIn 0.32s var(--dv-ease) both; }

/* ── 14. UTILITIES (used by dv2.js + page scripts) ── */
@keyframes dvFlash {
  0%   { background-color: rgba(224, 92, 126, 0.30); }
  100% { background-color: transparent; }
}
.dv-flash { animation: dvFlash 0.9s var(--dv-ease); }
.dv-stuck {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
  border-color: rgba(232, 92, 126, 0.35) !important;
  background: rgba(20, 22, 20, 0.96) !important;
}
.dv-counted { animation: dvPaneIn 0.5s var(--dv-ease) both; }

/* ── 15. REDUCED MOTION ───────────────────────────────────
   Everything above becomes instant; nothing stays hidden. */
@media (prefers-reduced-motion: reduce) {
  .app-view-container > .container-fluid > *,
  .app-view-container > main > .container-fluid > *,
  .tab-pane.active,
  .dv-pane-in,
  .dropdown-menu.show,
  .modal.show .modal-dialog,
  .alert,
  .dv-counted,
  details[open] > .rg-body,
  details[open] > .cx-grid,
  details[open] > .cx-drawer,
  details[open] > .cx-cmds {
    animation: none !important;
  }
  .dv-aurora,
  .dv-side .nav-link.active,
  .requiem-loader-title,
  .dv-loader-avatar { animation: none !important; }
  .card,
  .rg-row::before,
  .cx-reg-mod::before,
  .nav-pills .nav-link::before,
  .admin-tabs .nav-link::before,
  .gd-tabs .nav-link::before,
  .dv-links a.dv-link::after,
  .dv-btn::after { transition: none !important; }
  .dv-rise,
  .dv-rise.dv-in {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
  .dv-progress span { transition: none !important; }
}