/* interactive.css
   -----------------------------------------------------------------------------
   Purpose
   - Optional interaction-state styling layer.
   - Loaded globally, but intentionally minimal until interactive.js gains real modules.
*/

:root{
  --interactive-duration-fast: 160ms;
  --interactive-duration-medium: 240ms;
}

.shape-team-roster-v1 .team-roster-card{
  transition:
    background var(--interactive-duration-fast) ease,
    border-color var(--interactive-duration-fast) ease,
    transform var(--interactive-duration-fast) ease;
}

.shape-team-roster-v1 .team-roster-card:hover{
  background: color-mix(in srgb, var(--surface-2) 78%, transparent 22%);
  border-color: color-mix(in srgb, var(--border) 70%, #fff 30%);
}

.shape-team-roster-v1 .team-roster-item.is-open > .team-roster-card{
  background: color-mix(in srgb, var(--surface-2) 82%, transparent 18%);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border) 66%);
}

.shape-team-roster-v1 .team-roster-item.is-open > .team-roster-detail{
  animation: team-roster-reveal var(--interactive-duration-medium) ease;
}

.shape-app-stage-v1 [data-app-shell],
.shape-app-stage-v1 .app-stage-stage{
  transition:
    border-color var(--interactive-duration-fast) ease,
    background var(--interactive-duration-fast) ease,
    box-shadow var(--interactive-duration-fast) ease,
    transform var(--interactive-duration-fast) ease;
}

.shape-app-stage-v1 [data-app-mounted="initializing"] .app-stage-stage{
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
}

.shape-app-stage-v1 [data-app-mounted="true"] .app-stage-stage{
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border) 66%);
}

.shape-app-stage-v1 [data-app-mounted="error"] .app-stage-stage{
  border-color: color-mix(in srgb, #ff6b6b 52%, var(--border) 48%);
}

.shape-listing-stream-v1 .listing-stream-card{
  transition:
    background var(--interactive-duration-fast) ease,
    border-color var(--interactive-duration-fast) ease,
    transform var(--interactive-duration-fast) ease;
}

.shape-listing-stream-v1 .listing-stream-card:hover{
  background: color-mix(in srgb, var(--surface-2) 76%, transparent 24%);
  border-color: color-mix(in srgb, var(--border) 70%, #fff 30%);
  transform: translateY(-1px);
}

@keyframes team-roster-reveal{
  from{
    opacity: 0;
    transform: translateY(-6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .has-motion,
  [data-interactive],
  .shape-team-roster-v1 .team-roster-card,
  .shape-team-roster-v1 .team-roster-item.is-open > .team-roster-detail,
  .shape-app-stage-v1 [data-app-shell],
  .shape-app-stage-v1 .app-stage-stage,
  .shape-listing-stream-v1 .listing-stream-card{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}