/* =========================================================
   Optis — Exhibition Auto Demo
   Enabled only when the homepage is opened with ?demo=1
   ========================================================= */

html.auto-demo-mode {
  scroll-behavior: auto !important;
}

body.auto-demo-mode {
  cursor: none;
}

body.auto-demo-mode *,
body.auto-demo-mode *::before,
body.auto-demo-mode *::after {
  cursor: none !important;
}

.auto-demo-cursor {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 2147483647;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(232, 252, 255, .98);
  box-shadow:
    0 0 0 2px rgba(0, 200, 255, .72),
    0 0 0 7px rgba(0, 200, 255, .13),
    0 0 24px rgba(0, 200, 255, .72);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-40px, -40px, 0);
  transition: opacity .22s ease;
  will-change: transform;
}

.auto-demo-cursor::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(139, 92, 246, .48);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: autoDemoCursorPulse 1.25s ease-in-out infinite;
}

.auto-demo-cursor.is-visible { opacity: 1; }
.auto-demo-cursor.is-scrolling { opacity: .42; }

.auto-demo-hover {
  outline: 1px solid rgba(0, 200, 255, .38) !important;
  outline-offset: 4px;
  filter: brightness(1.075);
  transition:
    filter .28s ease,
    outline-color .28s ease,
    box-shadow .28s ease !important;
}

.auto-demo-hover.btn,
.auto-demo-hover.fam-card,
.auto-demo-hover.card,
.auto-demo-hover.panel,
.auto-demo-hover.step-body,
.auto-demo-hover.faq-q,
.auto-demo-hover.lab-tab,
.auto-demo-hover.stat--tag,
.auto-demo-hover.pj-row {
  box-shadow: 0 0 0 1px rgba(0, 200, 255, .17), 0 14px 38px rgba(0, 200, 255, .13) !important;
}

@keyframes autoDemoCursorPulse {
  0%, 100% { opacity: .34; transform: translate(-50%, -50%) scale(.82); }
  50% { opacity: .86; transform: translate(-50%, -50%) scale(1.13); }
}
