/* ====== Megamenu ====== */
.site-header { position: relative; }
.nav-links a.has-mega { display: inline-flex; align-items: center; gap: 4px; }
.megamenu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--neutral-900);
  border-top: 0.5px solid rgba(168,170,221,0.2);
  border-bottom: 0.5px solid rgba(168,170,221,0.2);
  padding: 32px 0;
  animation: mmFade 0.18s ease;
  z-index: 50;
}
@keyframes mmFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.megamenu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.1fr;
  gap: 32px;
}
.mm-col { display: flex; flex-direction: column; gap: 4px; }
.mm-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-indigo-200);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid rgba(168,170,221,0.15);
}
.mm-item {
  padding: 10px 0;
  text-decoration: none;
  color: #fff;
  border-bottom: 0.5px solid rgba(255,255,255,0.04);
  transition: padding-left 0.15s ease;
}
.mm-item:hover { padding-left: 6px; color: var(--brand-indigo-200); }
.mm-name { font-size: 13px; line-height: 1.3; }
.mm-sku { font-family: var(--font-mono); font-size: 10px; color: var(--neutral-500); margin-top: 2px; letter-spacing: 0.04em; }
.mm-feature {
  background: linear-gradient(135deg, #0F1438 0%, #2D2E83 100%);
  padding: 24px;
  border-radius: var(--r-md);
  border: 0.5px solid rgba(168,170,221,0.2);
}

/* ====== Video modal ====== */
.video-overlay {
  position: fixed; inset: 0;
  background: rgba(4,6,13,0.88);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: voFade 0.25s ease;
}
@keyframes voFade { from { opacity: 0; } to { opacity: 1; } }
.video-shell {
  width: 100%; max-width: 1040px;
  background: var(--neutral-900);
  border: 0.5px solid rgba(168,170,221,0.25);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.video-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10;
}
.video-close:hover { background: rgba(255,255,255,0.12); }
.video-meta { padding: 24px 32px 16px; }
.video-frame {
  position: relative;
  background: #04060D;
  margin: 0 32px;
  border: 0.5px solid rgba(168,170,221,0.2);
}
.vf-corner { position: absolute; width: 18px; height: 18px; border: 1.5px solid #4ADE80; }
.vf-corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.vf-corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.vf-corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.vf-corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.vf-rec {
  position: absolute; top: 16px; right: 36px;
  font-family: var(--font-mono); font-size: 11px;
  color: #ff4d4d; letter-spacing: 2px;
  animation: recBlink 1s steps(2) infinite;
}
@keyframes recBlink { 50% { opacity: 0.4; } }
.vf-tc {
  position: absolute; bottom: 16px; right: 36px;
  font-family: var(--font-mono); font-size: 11px;
  color: #A8AADD; letter-spacing: 1px;
}
.video-controls {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 32px 28px;
}
.vc-play {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-indigo-200); color: var(--neutral-900);
  border: none; cursor: pointer;
  font-size: 14px; padding-left: 3px;
}
.vc-bar { flex: 1; height: 2px; background: rgba(255,255,255,0.1); position: relative; }
.vc-fill { width: 30%; height: 100%; background: var(--brand-indigo-200); }

/* ====== Contact event log ====== */
.event-log {
  background: #04060D;
  border: 0.5px solid rgba(168,170,221,0.2);
  border-radius: 4px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #A8AADD;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 12px;
}
.event-log .ev { padding: 3px 0; line-height: 1.5; }
.event-log .ev .t { color: #5C5FBF; margin-right: 8px; }
.event-log .ev .name { color: #4ADE80; }
.event-log .ev .meta { color: var(--neutral-500); }

.trust-row-logos { gap: 32px; align-items: center; flex-wrap: wrap; }
.trust-row-logos img {
  height: 28px; width: auto;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.2s ease;
}
.trust-row-logos img:hover { filter: grayscale(0) opacity(1); }

@media (max-width: 1080px) {
  .megamenu { display: none; }
}
@media (max-width: 800px) {
  .megamenu-grid { grid-template-columns: repeat(2, 1fr); }
  .mm-feature { grid-column: span 2; }
}

/* ============================================
   Operator-console animations (shared)
   Used by BAS, PM, SEM, SWM dashboard mockups
   ============================================ */

/* Title-bar scanline — slow sweep across the top */
.op-scanline {
  position: relative;
  overflow: hidden;
}
.op-scanline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(168, 170, 221, 0.08) 50%, transparent 100%);
  animation: opScanline 6s linear infinite;
  pointer-events: none;
}
@keyframes opScanline {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Pulse for the LIVE indicator dot (in title bars) */
.op-live-dot {
  position: relative;
}
.op-live-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #4ADE80;
  opacity: 0.5;
  animation: opLivePulse 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes opLivePulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Alert blink — for warn / danger rows / zones */
.op-alert-warn   { animation: opAlertWarn 2.4s ease-in-out infinite; }
.op-alert-danger { animation: opAlertDanger 1.6s ease-in-out infinite; }
@keyframes opAlertWarn {
  0%, 100% { box-shadow: inset 0 0 0 0.5px rgba(245, 158, 11, 0.45); }
  50%      { box-shadow: inset 0 0 0 0.5px rgba(245, 158, 11, 0.95), 0 0 12px rgba(245, 158, 11, 0.22); }
}
@keyframes opAlertDanger {
  0%, 100% { box-shadow: inset 0 0 0 0.5px rgba(239, 68, 68, 0.55); }
  50%      { box-shadow: inset 0 0 0 0.5px rgba(239, 68, 68, 1),    0 0 14px rgba(239, 68, 68, 0.30); }
}

/* Glow dot for alert status indicators */
.op-pulse-dot {
  position: relative;
}
.op-pulse-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.5;
  animation: opLivePulse 1.6s ease-out infinite;
  pointer-events: none;
}

/* Event-row slide-in (new event appears at the top of the stream) */
@keyframes opEventEnter {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 80px; }
}
.op-event-enter { animation: opEventEnter 0.5s ease both; }

/* KPI value tick — brief shimmer when number updates */
@keyframes opKpiTick {
  0%   { color: #4ADE80; text-shadow: 0 0 12px rgba(74, 222, 128, 0.5); }
  100% { color: #fff;    text-shadow: none; }
}
.op-kpi-tick { animation: opKpiTick 0.6s ease-out; }

/* Pulsing "now" marker for charts */
@keyframes opNowPulse {
  0%, 100% { r: 3.5; opacity: 1;   }
  50%      { r: 5.5; opacity: 0.7; }
}
.op-now-marker { animation: opNowPulse 1.8s ease-in-out infinite; transform-origin: center; }

@keyframes opNowRing {
  0%   { r: 4;  opacity: 0.7; }
  100% { r: 14; opacity: 0;   }
}
.op-now-ring { animation: opNowRing 1.8s ease-out infinite; }

/* Pressure-transient re-trigger — periodic flash on the chart container */
@keyframes opRetrigger {
  0%, 90%, 100% { background: rgba(255,255,255,0.02); }
  92%, 96%       { background: rgba(239, 68, 68, 0.06); }
}
.op-retrigger { animation: opRetrigger 8s linear infinite; }

/* Subtle FFT bar wiggle */
@keyframes opFftWiggle {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.94); }
}
.op-fft-bar { transform-origin: bottom; animation: opFftWiggle 1.2s ease-in-out infinite; }

/* Sparkline trace dash-animation (data-shift feel) */
.op-spark-trace {
  stroke-dasharray: 4 2;
  animation: opSparkFlow 2s linear infinite;
}
@keyframes opSparkFlow {
  from { stroke-dashoffset: 6; }
  to   { stroke-dashoffset: 0; }
}

/* Reduce / disable motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .op-scanline::after,
  .op-live-dot::after,
  .op-pulse-dot::after,
  .op-alert-warn,
  .op-alert-danger,
  .op-event-enter,
  .op-kpi-tick,
  .op-now-marker,
  .op-now-ring,
  .op-retrigger,
  .op-fft-bar,
  .op-spark-trace {
    animation: none !important;
  }
}