/* Motion layer for the two existing 1600 × 900 command-center pages.
 * The controller owns preference, visibility, finite entrance/chart/dialog
 * effects. This file never moves a layout, chart, scene label or dialog.
 * Only clipped glints, decorative KPI icons and the assistant portrait move.
 */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) {
  --console-motion-ease: cubic-bezier(.2, .65, .3, 1);
}

/* Default is still. Explicit opt-in below also respects the OS preference. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(button, .nav-item, .pilot-path, .pilot-more a),
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.panel, .ops-panel)::after,
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .dha-trigger__portrait {
  transition: none;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .header-title > .console-motion-trace {
  position: absolute;
  top: calc(100% + 5px);
  right: 24px;
  left: 24px;
  display: none;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(79, 170, 220, .24) 22% 78%, transparent);
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .console-motion-trace > i {
  display: block;
  width: 32%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #35cfff 46%, #d9fbff 76%, transparent);
  opacity: 0;
  animation: none;
}

#water-console.deep-blue-command-center[data-page="energy"] .kpi-rail > .kpi-item:nth-child(4) .kpi-label::after {
  /* Leave room for the maximum-demand time tag at the icon's highest point. */
  bottom: 6px;
}

/* Preserve the launcher's anchored hit area; only its image may lift. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .dha-trigger:is(:hover, :focus-visible, :active) {
  transform: none;
}

/* Preference control remains readable and keyboard-visible with motion off. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #294e73;
  font-size: 14px;
  line-height: 1.7;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting > span {
  color: #99bad3;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting > div {
  min-width: 0;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting button[data-console-motion-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid #426c8f;
  border-radius: 3px;
  background: #0b223d;
  color: #b9d2e4;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting button[data-console-motion-toggle][aria-pressed="true"] {
  border-color: #4f9dc0;
  background: #113d60;
  color: #b8f0ff;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting button[data-console-motion-toggle]:hover:not(:disabled, [aria-disabled="true"]) {
  border-color: #76cbe8;
  background: #184768;
  color: #e0f7ff;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting button[data-console-motion-toggle]:focus-visible {
  outline: 2px solid #8de5ff;
  outline-offset: 3px;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting button[data-console-motion-toggle]:is(:disabled, [aria-disabled="true"]) {
  border-color: #35536d;
  background: #10253b;
  color: #8daabd;
  cursor: not-allowed;
  opacity: 1;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .pilot-motion-setting small[data-console-motion-note] {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  color: #99b9d0;
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: no-preference) {
  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) :is(button, .nav-item, .pilot-path, .pilot-more a) {
    transition: color 180ms var(--console-motion-ease), background-color 180ms var(--console-motion-ease), border-color 180ms var(--console-motion-ease), outline-color 180ms var(--console-motion-ease);
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .main-nav .nav-item:not(.active):hover {
    color: #dcf5ff;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) :is(.icon-button, .pilot-entry, .panel-link, .ghost-select, .view-all, .tool-button):hover:not(:disabled, [aria-disabled="true"]) {
    border-color: #54a8d3;
    color: #e2f7ff;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .pilot-tabs button:not([aria-selected="true"]):hover {
    border-bottom-color: #458cae;
    color: #c5ecfa;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) :is(.panel, .ops-panel)::after {
    transition: opacity 200ms var(--console-motion-ease);
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) :is(.panel, .ops-panel):is(:hover, :focus-within)::after {
    opacity: 1;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .dha-trigger__portrait {
    transition: transform 200ms var(--console-motion-ease);
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .dha-trigger:not(.dha-trigger--floating):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) .dha-trigger__portrait {
    transform: translateY(-2px);
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .header-title > .console-motion-trace {
    display: block;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .console-motion-trace > i {
    animation: console-motion-header-trace 4.6s linear infinite;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="false"]:where(:not([data-page]), [data-page="energy"]) .console-motion-trace > i {
    animation-play-state: paused;
  }
}

@keyframes console-motion-header-trace {
  0% { transform: translateX(-110%); opacity: 0; }
  8% { opacity: 1; }
  78% { opacity: 1; }
  92%, 100% { transform: translateX(420%); opacity: 0; }
}

/* Explicit cancellation also wins over older inherited component timings. */
#water-console.deep-blue-command-center[data-console-motion="off"]:where(:not([data-page]), [data-page="energy"]) :is(button, .nav-item, .pilot-path, .pilot-more a, .dha-trigger__portrait),
#water-console.deep-blue-command-center[data-console-motion="off"]:where(:not([data-page]), [data-page="energy"]) :is(.dha-panel, .ui-detail-drawer, .ui-drawer-backdrop, .ui-popover, .ui-range-menu, .plant-device-card, .plant-label, .page-toast, .ui-toast),
#water-console.deep-blue-command-center[data-console-motion="off"]:where(:not([data-page]), [data-page="energy"]) :is(.panel, .ops-panel)::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(button, .nav-item, .pilot-path, .pilot-more a, .dha-trigger__portrait),
  #water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.panel, .ops-panel)::after {
    transition: none !important;
  }
}

/* Additional accents use dedicated, aria-hidden children. Existing heading
 * and node pseudo-elements retain their original frames and category marks. */
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.panel-heading, .ops-panel-head) > .console-motion-panel-trace {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  display: none;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  pointer-events: none;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) .console-motion-panel-trace > i {
  display: block;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--panel-rgb, 45, 191, 225), .95) 46%, #e2faff 76%, transparent);
  opacity: 0;
  pointer-events: none;
}

#water-console.deep-blue-command-center[data-page="energy"] :is(.energy-node, .energy-unit-row) {
  position: relative;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.energy-node, .energy-unit-row, .plant-label) > .console-motion-selection-edge {
  position: absolute;
  inset: -1px;
  display: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  border: 1px solid rgba(var(--unit-rgb, 45, 216, 245), .9);
  border-radius: inherit;
  background: none;
  box-shadow: inset 0 0 10px rgba(var(--unit-rgb, 45, 216, 245), .22), 0 0 12px rgba(var(--unit-rgb, 45, 216, 245), .4);
  opacity: 0;
  pointer-events: none;
}

#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.energy-node, .energy-unit-row, .plant-label) > .console-motion-selection-edge::before,
#water-console.deep-blue-command-center:where(:not([data-page]), [data-page="energy"]) :is(.energy-node, .energy-unit-row, .plant-label) > .console-motion-selection-edge::after {
  content: none !important;
  display: none;
}

/* The model already marks its actual selected object with data-selected. */
#water-console.deep-blue-command-center:not([data-page]) .plant-label > .console-motion-selection-edge {
  --unit-rgb: 243, 188, 104;
}

@media (prefers-reduced-motion: no-preference) {
  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) :is(.panel-heading, .ops-panel-head) > .console-motion-panel-trace {
    display: block;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .console-motion-panel-trace > i {
    animation: console-motion-panel-glint 4.8s linear infinite;
    animation-play-state: paused;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"] .equipment-panel .console-motion-panel-trace > i {
    animation-duration: 5.2s;
    animation-delay: -1.8s;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"][data-page="energy"] .console-motion-panel-trace > i {
    animation-duration: 4.4s;
    animation-delay: -1.4s;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"][data-page="energy"] :is(.energy-node.active, .energy-unit-row.active) > .console-motion-selection-edge,
  #water-console.deep-blue-command-center[data-console-motion="on"]:not([data-page]) .plant-label[data-selected]:not(.is-hidden) > .console-motion-selection-edge {
    display: block;
    animation: console-motion-selection-breathe 2.6s ease-in-out infinite;
    animation-play-state: paused;
  }

  /* This list is rendered exclusively from open alarmActions. Closed entries
   * are removed by pilot-workflows.js and the empty state has no alarm bar. */
  #water-console.deep-blue-command-center[data-console-motion="on"]:not([data-page]) .alarm-list > .alarm-item[data-pilot-home-alarm] > i {
    animation: console-motion-alarm-breathe 2.8s ease-in-out infinite;
    animation-play-state: paused;
    pointer-events: none;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:not([data-page]) .alarm-list > .alarm-item[data-pilot-home-alarm]:nth-child(2) > i {
    animation-delay: -.9s;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:not([data-page]) .alarm-list > .alarm-item[data-pilot-home-alarm]:nth-child(3) > i {
    animation-delay: -1.8s;
  }

  /* The visible KPI illustrations are these background-image pseudo-elements,
   * not the legacy hidden lucide icons. Metric values never animate. */
  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-item:not(.alarm-kpi) .kpi-label::after {
    animation: console-motion-kpi-float 3.8s ease-in-out infinite;
    animation-delay: -.6s;
    animation-play-state: paused;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-item:nth-child(2n) .kpi-label::after {
    animation-delay: -1.8s;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-item:nth-child(3n) .kpi-label::after {
    animation-delay: -3s;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="true"]:where(:not([data-page]), [data-page="energy"]) .console-motion-panel-trace > i,
  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="true"][data-page="energy"] :is(.energy-node.active, .energy-unit-row.active) > .console-motion-selection-edge,
  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="true"]:not([data-page]) .plant-label[data-selected]:not(.is-hidden) > .console-motion-selection-edge,
  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="true"]:not([data-page]) .alarm-list > .alarm-item[data-pilot-home-alarm] > i,
  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="true"]:where(:not([data-page]), [data-page="energy"]) .kpi-rail > .kpi-item:not(.alarm-kpi) .kpi-label::after {
    animation-play-state: running;
  }
}

@keyframes console-motion-panel-glint {
  0% { transform: translateX(-110%); opacity: 0; }
  8% { opacity: 1; }
  78% { opacity: 1; }
  94%, 100% { transform: translateX(440%); opacity: 0; }
}

@keyframes console-motion-selection-breathe {
  0%, 100% { opacity: .28; }
  50% { opacity: 1; }
}

@keyframes console-motion-alarm-breathe {
  0%, 100% { opacity: .45; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.3); }
}

@keyframes console-motion-kpi-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 5px rgba(var(--metric-rgb), .24)) brightness(1);
  }
  50% {
    transform: translateY(-5px) scale(1.05);
    filter: drop-shadow(0 0 8px rgba(var(--metric-rgb), .5)) brightness(1.18);
  }
}

/* Scene-side assistant: keep its label and hit area fixed. Both rings sit
 * behind the portrait, inside its existing slot, and never receive input. */
#water-console.deep-blue-command-center:not([data-page]) .dha-trigger--floating::before,
#water-console.deep-blue-command-center:not([data-page]) .dha-trigger--floating::after {
  content: none;
  position: absolute;
  z-index: -1;
  top: -2px;
  left: 4px;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  pointer-events: none;
}

#water-console.deep-blue-command-center:not([data-page]) .dha-trigger--floating::before {
  border: 1px solid rgba(90, 226, 255, .65);
  background: radial-gradient(circle, rgba(34, 142, 233, .12) 48%, rgba(45, 201, 244, .28) 70%, transparent 74%);
  box-shadow: 0 0 4px rgba(61, 212, 255, .4), inset 0 0 4px rgba(68, 172, 255, .3);
}

#water-console.deep-blue-command-center:not([data-page]) .dha-trigger--floating::after {
  border: 2px solid transparent;
  border-top-color: #bbf9ff;
  border-right-color: rgba(64, 201, 255, .55);
  border-bottom-color: rgba(139, 121, 255, .8);
}

@media (prefers-reduced-motion: no-preference) {
  #water-console.deep-blue-command-center[data-console-motion="on"]:not([data-page]) .dha-trigger--floating[aria-expanded="false"] .dha-trigger__portrait {
    transition: none;
    animation: console-motion-assistant-float 3.2s ease-in-out infinite;
    animation-play-state: paused;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:not([data-page]) .dha-trigger--floating[aria-expanded="false"]::before {
    content: '';
    animation: console-motion-assistant-aura 3.2s ease-in-out infinite;
    animation-play-state: paused;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"]:not([data-page]) .dha-trigger--floating[aria-expanded="false"]::after {
    content: '';
    animation: console-motion-assistant-orbit 4.8s linear infinite;
    animation-play-state: paused;
  }

  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="true"]:not([data-page]) .dha-trigger--floating[aria-expanded="false"] .dha-trigger__portrait,
  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="true"]:not([data-page]) .dha-trigger--floating[aria-expanded="false"]::before,
  #water-console.deep-blue-command-center[data-console-motion="on"][data-console-motion-active="true"]:not([data-page]) .dha-trigger--floating[aria-expanded="false"]::after {
    animation-play-state: running;
  }
}

@keyframes console-motion-assistant-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes console-motion-assistant-aura {
  0%, 100% { transform: scale(.94); opacity: .35; }
  50% { transform: scale(1.08); opacity: .9; }
}

@keyframes console-motion-assistant-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}