/*
 * Instinctor Chart — static rules
 *
 * Extracted from the per-chart inline CSS that the chart renderer used to
 * emit via wp_add_inline_style. Every keyframe + the mobile stacking rule
 * was identical for every chart on every page; the only per-instance bits
 * (the conic-gradient sweep `@property` and the matching sweep keyframe)
 * stay inline because their property names embed the chart's element id.
 *
 * Phase 1 CSS-consolidation pass (post-step-33). Pattern mirrors
 * `assets/js/impulse-animator.js`: singleton enqueue from the renderer
 * on first chart render per page.
 *
 * Class-based selectors mean these rules apply to every chart at once,
 * regardless of how many chart blocks the page renders.
 */

/* ── Mobile stacking ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .impulse-chart {
        flex-direction: column;
    }
    .impulse-chart .impulse-chart-legend {
        max-width: 100%;
    }
}

/* ── Entry animation keyframes ────────────────────────────────────── */
@keyframes impulse-chart-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes impulse-chart-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes impulse-chart-pop {
    from { opacity: 0; transform: scale(0.3); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes impulse-chart-stroke-fade {
    to { stroke-opacity: 1; }
}

@keyframes impulse-chart-bars-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@keyframes impulse-chart-line-draw {
    from { stroke-dashoffset: 3000; }
    to   { stroke-dashoffset: 0; }
}

/* ── Subtle "alive" animations ────────────────────────────────────── */
@keyframes impulse-chart-breathe {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

@keyframes impulse-chart-sway {
    0%, 100% { transform: rotateX(-38deg) rotateY(-1.2deg); }
    50%      { transform: rotateX(-38deg) rotateY(1.2deg); }
}

@keyframes impulse-radial-pulse {
    0%, 100% { transform: rotate(-90deg) scale(1); }
    50%      { transform: rotate(-90deg) scale(1.015); }
}

/* Line path uses a "large enough" dasharray so the line-draw animation
 * works without measuring the path length server-side. */
.impulse-chart-line-path {
    stroke-dasharray: 3000;
}

/* ── Idle animations (gated on prefers-reduced-motion) ────────────── */
/* Breathe: pie / radial / line — bar excluded because the symmetric
 * translateY visually bobs the bar baseline. The renderer emits a
 * `data-chart-type` attribute on the wrapper so we can scope here. */
@media (prefers-reduced-motion: no-preference) {
    .impulse-chart:not([data-chart-type="bar"]) .impulse-chart-svg {
        animation: impulse-chart-breathe 6s ease-in-out infinite;
    }
    /* Tilted-ring sway. Skipped when JS-driven mouse tilt is on
     * (data-tilt-sens > 0): the JS writes transform per frame and the
     * CSS animation would fight it, making the slider feel dead. */
    .impulse-chart-tilted_ring[data-tilt-sens="0"] .impulse-chart-tilt {
        animation: impulse-chart-sway 7s ease-in-out infinite;
    }
}