/* ============================================================
   AEROTWIN — MOTION & ANIMATIONS
   ============================================================ */

/* ============================================================
   §4 ANIMATIONS & MOTION
   ============================================================ */

    /* Metric value flash when value changes (JS adds .cc-val-flash) */
    @keyframes cc-val-in {
      0% {
        opacity: 0.3;
        transform: translateY(3px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .cc-val-flash {
      animation: cc-val-in var(--motion-base) var(--ease-spring-soft) both;
    }

    /* Live Engine & Command Center health ring: smooth stroke transition */
    .health-ring-fill,
    .cc-hring-fill {
      transition: stroke-dashoffset var(--motion-slow) var(--ease-standard), stroke var(--motion-slow) var(--ease-standard);
    }

    /* Live sy-dot pulse — ONLY on data-live="1"; idle dots are static */
    @keyframes sy-pulse {

      0%,
      100% {
        opacity: 0.6;
        box-shadow: 0 0 0 2px var(--status-normal-bg);
      }

      50% {
        opacity: 1;
        box-shadow: 0 0 0 4px var(--status-normal-bg);
      }
    }

    .sync-item[data-live="1"] .sy-dot {
      animation: sy-pulse 2000ms ease-in-out infinite;
    }

    .sync-item[data-live="0"] .sy-dot {
      animation: none;
      opacity: 0.35;
    }

    /* Alert — single pulse on confirmed new alert/fault, non-looping */
    @keyframes alert-once {
      0% {
        box-shadow: 0 0 0 0 var(--status-crit-bg);
      }

      70% {
        box-shadow: 0 0 0 10px transparent;
      }

      100% {
        box-shadow: 0 0 0 0 transparent;
      }
    }

    .alert-new {
      animation: alert-once 900ms var(--ease-standard) 1;
    }

    /* Chart line redraw — SVG polylines reveal smoothly on draw */
    .chart-line-draw {
      stroke-dasharray: var(--line-length, 1200);
      stroke-dashoffset: var(--line-length, 1200);
      animation: draw-line var(--motion-deliberate) var(--ease-standard) forwards;
    }

    @keyframes draw-line {
      to {
        stroke-dashoffset: 0;
      }
    }

    /* Standby ↔ Live panel fade */
    .cc-standby {
      transition: opacity var(--motion-base) var(--ease-standard);
    }

    .cc-live-only {
      transition: opacity var(--motion-base) var(--ease-standard);
    }

    /* Reduced motion accessibility override */
    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
      }
    }

    .panel-title,
    h2.panel-title,
    h3.panel-title {
      font-family: var(--mono);
      font-size: var(--text-micro);
      font-weight: 600;
      letter-spacing: normal;
      text-transform: none;
      color: var(--ink-faint);
      margin: 0 0 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid var(--line);
      padding-bottom: 8px;
      flex-wrap: wrap;
    }

    .screen-head {
      margin-bottom: 16px;
    }

    .screen-head h1 {
      font-size: calc(22px * var(--text-scale));
      font-weight: 700;
      letter-spacing: -0.015em;
      margin-bottom: 4px;
    }

    .screen-desc {
      color: var(--ink-soft);
      max-width: 80ch;
      font-size: calc(13px * var(--text-scale));
      margin-bottom: 0;
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 16px;
      align-items: start;
    }

    @media (max-width:960px) {
      .grid-2 {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .cc-two {
        grid-template-columns: 1fr;
      }

      .field-row {
        grid-template-columns: 1fr;
      }
    }

    .progress-track {
      height: 6px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 6px;
    }

    .progress-fill {
      height: 100%;
      width: 0%;
      background: var(--teal);
      transition: opacity .3s linear;
    }

    .progress-labels {
      display: flex;
      justify-content: space-between;
      font-family: var(--mono);
      font-size: var(--text-micro);
      color: var(--ink-faint);
      margin-top: 4px;
    }

    /* ---------- MODE VISIBILITY (progressive disclosure) ---------- */