/* =========================================================
   APIS v12 — Exhibition Auto Demo
   Enabled only when the homepage is opened with ?demo=1
   Visual treatment follows the APIS violet / magenta / honey theme.
   ========================================================= */

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: var(--honey-2, #ffd166);
  box-shadow:
    0 0 0 2px rgba(168, 85, 247, .88),
    0 0 0 7px rgba(168, 85, 247, .15),
    0 0 22px rgba(214, 51, 140, .62),
    0 0 34px rgba(255, 176, 32, .22);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-40px, -40px, 0);
  transition: opacity .22s ease;
  will-change: transform;
}

.auto-demo-cursor::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: rgba(255,255,255,.34);
  filter: blur(.2px);
}

.auto-demo-cursor::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(168, 85, 247, .62);
  border-radius: 50%;
  box-shadow: inset 0 0 10px rgba(214, 51, 140, .12);
  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(168, 85, 247, .52) !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.pcard,
.auto-demo-hover.hex-cell,
.auto-demo-hover.stat,
.auto-demo-hover.step,
.auto-demo-hover.value,
.auto-demo-hover.prow-text,
.auto-demo-hover.prow-stage,
.auto-demo-hover.hive,
.auto-demo-hover.flow,
.auto-demo-hover.cta-card,
.auto-demo-hover.contact-row,
.auto-demo-hover.social a,
.auto-demo-hover.flinks a,
.auto-demo-hover.fcontact a {
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, .18),
    0 14px 38px rgba(91, 33, 182, .16),
    0 0 28px rgba(214, 51, 140, .08) !important;
}

.auto-demo-hover.btn--honey,
.auto-demo-hover.btn--ghost,
.auto-demo-hover.footer-cta {
  outline-color: rgba(255, 176, 32, .58) !important;
  box-shadow:
    0 0 0 1px rgba(255, 176, 32, .16),
    0 14px 38px rgba(255, 176, 32, .10) !important;
}

@keyframes autoDemoCursorPulse {
  0%, 100% {
    opacity: .34;
    transform: translate(-50%, -50%) scale(.82);
    border-color: rgba(168, 85, 247, .58);
  }
  50% {
    opacity: .9;
    transform: translate(-50%, -50%) scale(1.14);
    border-color: rgba(255, 176, 32, .68);
  }
}