/* Concept D: restrained motion and compact platform navigation. */
.motion-preview .motion-nav {
  gap: 10px;
}

.motion-preview .motion-nav > a,
.motion-preview .nav-trigger {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 10px;
  transition: color .22s ease, background .22s ease;
}

.motion-preview .nav-trigger span {
  margin-left: 7px;
  color: #a5b0bf;
  font-size: 15px;
  transition: transform .26s ease, color .26s ease;
}

.motion-preview .nav-cluster {
  position: relative;
}

.motion-preview .nav-cluster:hover .nav-trigger,
.motion-preview .nav-cluster:focus-within .nav-trigger,
.motion-preview .nav-cluster.open .nav-trigger {
  color: var(--navy);
  background: #f3f6fa;
}

.motion-preview .nav-cluster:hover .nav-trigger span,
.motion-preview .nav-cluster:focus-within .nav-trigger span,
.motion-preview .nav-cluster.open .nav-trigger span {
  color: var(--red);
  transform: rotate(45deg);
}

.motion-preview .nav-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  z-index: 40;
  width: 294px;
  padding: 15px;
  border: 1px solid #e5ebf3;
  border-radius: 17px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 52px rgba(7, 30, 66, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  transition: opacity .24s ease, visibility .24s ease, transform .24s ease;
}

.motion-preview .nav-panel::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 17px;
}

.motion-preview .nav-panel-wide {
  width: 308px;
}

.motion-preview .nav-cluster:hover .nav-panel,
.motion-preview .nav-cluster:focus-within .nav-panel,
.motion-preview .nav-cluster.open .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.motion-preview .nav-panel-label {
  display: block;
  margin: 2px 7px 9px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

.motion-preview .nav-panel a {
  display: block;
  padding: 11px 12px;
  border-radius: 11px;
  transition: background .2s ease, transform .2s ease;
}

.motion-preview .nav-panel a:hover,
.motion-preview .nav-panel a:focus-visible {
  color: var(--navy);
  background: #f4f7fb;
  transform: translateX(2px);
}

.motion-preview .nav-panel b {
  display: block;
  color: var(--navy);
  font-size: 13px;
}

.motion-preview .nav-panel small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.motion-preview .hero-service-strip {
  overflow: hidden;
}

.motion-preview .hero-service-strip::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -38%;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.15), rgba(244,58,67,.2), transparent);
  transform: skewX(-20deg);
  animation: serviceTrace 5.6s ease-in-out infinite;
}

.motion-preview .hero-service-strip a {
  position: relative;
  z-index: 1;
}

@keyframes serviceTrace {
  0%, 18% { left: -38%; opacity: 0; }
  30% { opacity: 1; }
  64% { left: 110%; opacity: 1; }
  65%, 100% { left: 110%; opacity: 0; }
}

.motion-preview #dashboard .dash-filter b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.motion-preview #dashboard .dash-filter b::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(229, 34, 49, .35);
  animation: operationsSignal 2.6s ease-out infinite;
}

.motion-preview #dashboard .panel-title .pill.active-qr,
.motion-preview #dashboard .panel-title .pill.quote-ready {
  animation: statusBreath 3.4s ease-in-out infinite;
}

.motion-preview #dashboard .panel-title .pill.quote-ready {
  animation-delay: .85s;
}

@keyframes operationsSignal {
  0% { box-shadow: 0 0 0 0 rgba(229, 34, 49, .34); }
  72%, 100% { box-shadow: 0 0 0 8px rgba(229, 34, 49, 0); }
}

@keyframes statusBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(20, 118, 83, 0); transform: translateY(0); }
  45% { box-shadow: 0 4px 13px rgba(20, 118, 83, .12); transform: translateY(-1px); }
}

.motion-preview #dashboard .panel-title .pill.quote-ready {
  animation-name: quoteBreath;
}

@keyframes quoteBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 34, 49, 0); transform: translateY(0); }
  45% { box-shadow: 0 4px 13px rgba(229, 34, 49, .14); transform: translateY(-1px); }
}

@media (max-width: 1060px) {
  .motion-preview .motion-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-preview .hero-service-strip::after,
  .motion-preview #dashboard .dash-filter b::before,
  .motion-preview #dashboard .panel-title .pill {
    animation: none;
  }
}