/* status dot: Moscow online window 10:00–20:00 */

.status-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-button-bg);
}

.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green-button-bg);
  animation: status-ping 2.4s var(--ease-out) infinite;
}

.status-dot.is-offline {
  background: #c45c4a;
}

.status-dot.is-offline::after {
  display: none;
}

@keyframes status-ping {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* reveal on scroll (blur fade) */

[data-reveal]:not(.is-visible) {
  opacity: 0;
}

[data-reveal].is-visible {
  animation: reveal .7s var(--ease-out) backwards;
  animation-delay: calc(var(--reveal-i, 0) * 55ms);
}

@keyframes reveal {
  from { opacity: 0; filter: blur(6px); transform: translateY(14px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* spotlight: radial highlight following the pointer */

.spotlight {
  position: relative;
  isolation: isolate;
}

.spotlight::before,
.spotlight::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
}

.spotlight::before {
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    var(--spotlight),
    transparent 70%
  );
}

.spotlight::after {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(
    220px circle at var(--mx, 50%) var(--my, 50%),
    var(--spotlight-border),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.spotlight:hover::before,
.spotlight:hover::after {
  opacity: 1;
}

/* Instant theme swap: kill color/bg transitions for one frame to avoid flicker */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
  animation: none !important;
}

/* page enter */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

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

  [data-reveal]:not(.is-visible) {
    opacity: 1;
  }

  .status-dot::after {
    display: none;
  }
}