/* Motion layer: mirrors the reference's small, always-on activity cues. */
@keyframes pulse-dot {
  50% { transform: scale(.68); opacity: .62; }
}
@keyframes status-glow {
  50% { box-shadow: 0 0 14px #c100eb88; color: #e77cff; }
}
@keyframes chart-pulse {
  50% { transform: scaleY(.77); opacity: .7; }
}
@keyframes feed-in {
  from { opacity: 0; transform: translate(30px,20px) scale(.95); }
  to { opacity: 1; transform: translate(0) scale(1); }
}
@keyframes marquee {
  to { transform: translateX(calc(-50% - 5.5px)); }
}

.brand-mark i,
.pill span { animation: pulse-dot 2s ease-in-out infinite; }

.primary-button { transition: transform .2s, filter .2s; }
.primary-button b { transition: transform .2s; }
.primary-button:hover { transform: translateY(-2px) scale(1.02); }
.primary-button:hover b { transform: translate(2px,-2px); }

.dashboard {
  transform: perspective(1600px) rotateX(4deg) rotateY(-6deg);
  transition: transform .5s ease;
}
.dashboard:hover { transform: perspective(1600px) rotateX(0) rotateY(0); }
.window-head b { animation: status-glow 2s ease-in-out infinite; }
.chart i { transform-origin: bottom; animation: chart-pulse 2.8s ease-in-out infinite; }
.chart i:nth-child(1) { animation-delay: -1.5s; }
.chart i:nth-child(2) { animation-delay: -.8s; }
.chart i:nth-child(3) { animation-delay: -2s; }
.chart i:nth-child(4) { animation-delay: -.2s; }
.chart i:nth-child(5) { animation-delay: -1.1s; }
.chart i:nth-child(6) { animation-delay: -.5s; }
.chart i:nth-child(7) { animation-delay: -1.8s; }
.chart i:nth-child(8) { animation-delay: -.6s; }
.chart i:nth-child(9) { animation-delay: -1.3s; }
.chart i:nth-child(10) { animation-delay: -.3s; }
.chart i:nth-child(11) { animation-delay: -1.6s; }

.feed-enter { animation: feed-in .52s cubic-bezier(.16,1,.3,1) both; }

/* Keep the floating dashboard notification legible over its mock UI. */
.floating-alert {
  z-index: 3;
  background: linear-gradient(135deg, #11101a 0%, #14101c 100%);
  box-shadow: 0 20px 42px rgba(0, 0, 0, .5), inset 0 -2px #b900ed;
}

/* New preview items enter from below as older rows scroll away. */
.preview-feed-window {
  max-height: 471px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 92%, transparent 100%);
}
.preview-feed-window::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 42px;
  pointer-events: none;
  background: linear-gradient(transparent, var(--bg));
}
#live-preview-feed.feed-scroll { transition: transform .68s cubic-bezier(.22,.61,.36,1); }
.preview-feed-window .discord-alert { grid-column: auto; width: auto; justify-self: auto; }

.feature-grid article {
  position: relative;
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.feature-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 24% 0%, rgba(219, 0, 255, .24), transparent 48%);
  transition: opacity .28s ease;
}
.feature-grid article:hover {
  transform: translateY(-7px);
  border-color: rgba(220, 0, 255, .55);
  background: linear-gradient(135deg, #1b0b27, #120c1c);
  box-shadow: 0 18px 35px rgba(0, 0, 0, .35), 0 0 28px rgba(195, 0, 240, .12);
}
.feature-grid article:hover::before { opacity: 1; }
.feature-grid article:hover .feature-icon {
  transform: scale(1.08);
  box-shadow: 0 0 22px rgba(216, 0, 246, .38);
}
.feature-icon { position: relative; z-index: 1; transition: transform .28s ease, box-shadow .28s ease; }
.feature-grid h3, .feature-grid p { position: relative; z-index: 1; }

.ticker { overflow: hidden; }
.ticker-row {
  justify-content: flex-start;
  min-width: 0;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-row { animation-play-state: paused; }
.ticker:before,
.ticker:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 22px;
  bottom: 0;
  width: clamp(35px, 10vw, 130px);
  pointer-events: none;
}
.ticker:before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ticker:after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

@media (max-width: 850px) {
  .ticker-row { transform: none; }
  .preview-feed-window { max-height: 471px; }
  .dashboard { height: auto; }
  .floating-alert {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% - 26px);
    margin: 0 13px 14px auto;
  }
  .watching { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}