@layer site {
/* Analytics & QA — the three "View by" charts in the hero (Department, Professor, Student).
   Each chart is its own panel; showing a panel (display: none -> visible) restarts its
   animations, so every switch replays the build-up. Reduced motion is handled in base.css. */
.aq-chart { display: block; width: 100%; height: auto; overflow: visible; }
.aq-panel[hidden] { display: none; }

.aq-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: aq-grow-y .7s cubic-bezier(.2, .7, .2, 1) both; }
.aq-hbar { transform-box: fill-box; transform-origin: 0 50%; animation: aq-grow-x .8s cubic-bezier(.2, .7, .2, 1) both; }
.aq-fade { animation: aq-fade .4s ease both; }
.aq-pop { transform-box: fill-box; transform-origin: center; animation: aq-pop .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.aq-pulse { transform-box: fill-box; transform-origin: center; animation: aq-pulse 1.8s ease-out infinite; }

@keyframes aq-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes aq-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes aq-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aq-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes aq-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }

/* Phones: keep the chart at a readable size and let it scroll sideways inside its box. */
@media (max-width: 599.98px) {
  .aq-panel { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .aq-chart { min-width: 560px; }
}

}