/* ==========================================================================
   Aura Estates — Architectural Motion & Spatial Depth Layer
   Exact motion.css from smartconsult-mockup.pactios.com
   ========================================================================== */

:root {
  --aura-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --aura-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --aura-dur-fast: 140ms;
  --aura-dur-med: 240ms;
  --aura-dur-slow: 420ms;
  --aura-depth-sm: 0 2px 10px -2px rgba(25, 28, 33, 0.04),
    0 1px 3px -1px rgba(25, 28, 33, 0.03);
  --aura-depth-md: 0 10px 28px -6px rgba(25, 28, 33, 0.07),
    0 4px 10px -2px rgba(25, 28, 33, 0.04);
  --aura-depth-lg: 0 22px 48px -12px rgba(25, 28, 33, 0.12),
    0 6px 16px -4px rgba(25, 28, 33, 0.05);
  --aura-grid-line: rgba(25, 28, 33, 0.028);
}

/* --------------------------------------------------------------------------
   1. Architectural Drafting Grid Backdrop & Glass Surfaces
   -------------------------------------------------------------------------- */
body.aura-shell {
  background-color: #faf9f6;
  background-image:
    linear-gradient(to right, var(--aura-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--aura-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
}

.aura-blueprint {
  background-image:
    radial-gradient(rgba(114, 91, 56, 0.12) 1px, transparent 1px),
    linear-gradient(to right, rgba(25, 28, 33, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25, 28, 33, 0.035) 1px, transparent 1px);
  background-size: 24px 24px, 96px 96px, 96px 96px;
}

.aura-glass {
  background-color: rgba(250, 249, 246, 0.84);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* --------------------------------------------------------------------------
   2. Page Entrance + Staggered Section Reveal
   -------------------------------------------------------------------------- */
@keyframes auraPageFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes auraFadeRise {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.aura-page-enter {
  animation: auraPageFade 220ms var(--aura-ease-out) both;
}

.aura-stagger > *:not(.modal-overlay) {
  animation: auraFadeRise 320ms var(--aura-ease-out) both;
}

.aura-stagger > *:nth-child(1) { animation-delay: 20ms; }
.aura-stagger > *:nth-child(2) { animation-delay: 55ms; }
.aura-stagger > *:nth-child(3) { animation-delay: 90ms; }
.aura-stagger > *:nth-child(4) { animation-delay: 125ms; }
.aura-stagger > *:nth-child(5) { animation-delay: 160ms; }
.aura-stagger > *:nth-child(n+6) { animation-delay: 190ms; }

/* --------------------------------------------------------------------------
   3. Card Depth, Tactile Hover & Focus-Within Elevation
   -------------------------------------------------------------------------- */
.aura-card,
#workspace-root .card,
#workspace-root .kpi-card,
#workspace-root .bg-surface-container-lowest.rounded-lg,
#workspace-root .bg-surface-container-lowest.rounded {
  box-shadow: var(--aura-depth-sm);
  transition:
    transform var(--aura-dur-med) var(--aura-ease-out),
    box-shadow var(--aura-dur-med) var(--aura-ease-out),
    background-color var(--aura-dur-fast) ease;
}

.aura-card-interactive:hover,
#workspace-root .kpi-card:hover,
#workspace-root .bg-surface-container-lowest.group:hover,
#workspace-root [data-unit-id]:hover,
#workspace-root [data-select-unit]:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--aura-depth-md);
}

#workspace-root button,
#modal-portal-root button,
#workspace-root a[href^="#/"] {
  transition:
    transform var(--aura-dur-fast) var(--aura-ease-out),
    background-color var(--aura-dur-fast) ease,
    color var(--aura-dur-fast) ease,
    box-shadow var(--aura-dur-fast) ease,
    opacity var(--aura-dur-fast) ease;
}

#workspace-root button:active:not(:disabled),
#modal-portal-root button:active:not(:disabled) {
  transform: translate3d(0, 0.5px, 0) scale(0.99);
}

/* --------------------------------------------------------------------------
   4. Animated Progress Bars, Charts & Ring Gauges
   -------------------------------------------------------------------------- */
@keyframes auraBarGrowX {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes auraBarGrowY {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.aura-bar-grow {
  transform-origin: left center;
  animation: auraBarGrowX 560ms var(--aura-ease-out) both;
}

.aura-bar-grow-y {
  transform-origin: center bottom;
  animation: auraBarGrowY 560ms var(--aura-ease-out) both;
}

@keyframes auraStrokeDraw {
  from {
    stroke-dashoffset: var(--aura-dash-len, 320);
  }
  to {
    stroke-dashoffset: var(--aura-dash-target, 0);
  }
}

.aura-chart-draw {
  animation: auraStrokeDraw 780ms var(--aura-ease-out) both;
}

/* --------------------------------------------------------------------------
   5. Floor Plan & Architectural Blueprint Zoom / Pan Polish
   -------------------------------------------------------------------------- */
.aura-plan-zoom {
  overflow: hidden;
  position: relative;
}

.aura-plan-zoom img,
.aura-plan-zoom svg {
  transition: transform 520ms var(--aura-ease-out), filter 320ms ease;
  will-change: transform;
}

.aura-plan-zoom:hover img,
.aura-plan-zoom:hover svg {
  transform: scale(1.035);
}

.aura-blueprint-frame {
  position: relative;
  border: 1px solid rgba(27, 77, 62, 0.18);
  background-color: #f5f2eb;
  background-image:
    linear-gradient(rgba(27, 77, 62, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 77, 62, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(232, 240, 236, 0.35), rgba(245, 242, 235, 0.92));
  background-size: 24px 24px, 24px 24px, 100% 100%;
  box-shadow: inset 0 1px 4px rgba(26, 28, 26, 0.04);
  border-radius: 6px;
}

.aura-blueprint-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(27, 77, 62, 0.22);
  pointer-events: none;
  z-index: 2;
}

.aura-blueprint-frame::after {
  content: "М 1:50 · ВЕКТОР";
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(114, 91, 56, 0.72);
  background: rgba(250, 249, 246, 0.86);
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
}

.aura-blueprint-tag {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #745b00;
  background: rgba(254, 222, 178, 0.45);
  border: 1px solid rgba(212, 175, 55, 0.45);
  padding: 2px 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   6. Linked Selection Highlight (Matrix / Pipeline / Dossier Connection)
   -------------------------------------------------------------------------- */
@keyframes auraPulseRing {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(212, 175, 55, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
  }
}

.aura-unit-selected {
  outline: none;
}

.aura-dossier-morph {
  opacity: 1;
}

/* Connected entity breadcrumb bar (Building -> Floor -> Unit -> Contract -> Payment) */
.aura-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(244, 243, 240, 0.92), rgba(250, 249, 246, 0.92));
  box-shadow: inset 0 0 0 1px rgba(229, 226, 220, 0.9);
  margin-bottom: 18px;
}

.aura-chain-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #45474b;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(25, 28, 33, 0.05);
  text-decoration: none;
  transition: all var(--aura-dur-fast) var(--aura-ease-out);
}

.aura-chain-step:hover {
  color: #03060b;
  transform: translateY(-1px);
}

.aura-chain-step.is-active {
  background: #191c21;
  color: #ffffff;
}

.aura-chain-step.is-active .aura-chain-dot {
  background: #d4af37;
}

.aura-chain-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #1b4d3e;
}

.aura-chain-conn {
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, #725b38, #d4af37);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   7. Spatial SVG Trace Connector (Unit Cell -> Dossier Inspector)
   -------------------------------------------------------------------------- */
.aura-trace-rail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}

@keyframes auraTraceFlow {
  from {
    stroke-dashoffset: 28;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.aura-trace-rail path {
  fill: none;
  stroke: #d4af37;
  stroke-width: 1.85;
  stroke-dasharray: 5 4;
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}