/* Landing-style motion for the status page (mirrors marketing.css: scroll reveal, cursor
   spotlight, drifting aurora, ping dot). Plain at rest, "magic" only when observed.
   Everything is gated on html.fx, which fx.js sets only when motion is allowed. */
.banner,
.card,
.stat,
.incident-card,
.maint-card {
  position: relative;
  isolation: isolate;
}

/* Scroll reveal */
.fx [data-fx] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms);
}
.fx [data-fx].is-in {
  opacity: 1;
  transform: none;
}

/* Cursor spotlight */
.fx [data-fx]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tone, var(--info)) 14%, transparent), transparent 70%);
}
.fx [data-fx]:hover::before {
  opacity: 1;
}

/* Banner aurora: tinted by the current state, drifting slowly */
.banner {
  overflow: hidden;
  --tone: var(--ok);
}
.banner.degraded { --tone: var(--warn); }
.banner.outage { --tone: var(--down); }
.banner.maintenance { --tone: var(--info); }
.fx .banner::after {
  content: "";
  position: absolute;
  inset: -60% -10% auto;
  height: 160%;
  z-index: -1;
  opacity: 0.22;
  filter: blur(50px);
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 40%, var(--tone), transparent 70%),
    radial-gradient(35% 45% at 75% 30%, color-mix(in srgb, var(--info) 80%, transparent), transparent 70%);
  animation: fx-aurora 16s ease-in-out infinite alternate;
}
html[data-theme="dark"] .fx .banner::after {
  opacity: 0.3;
}
@keyframes fx-aurora {
  to { transform: translate3d(6%, 10%, 0) scale(1.12) rotate(4deg); }
}

/* Live ping on the banner badge */
.fx .banner .badge-dot {
  position: relative;
}
.fx .banner.operational .badge-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ok);
  z-index: -1;
  animation: fx-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fx-ping {
  75%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Uptime bars grow in left to right when their card is revealed */
.fx [data-fx]:not(.is-in) .bar {
  opacity: 0;
  transform: scaleY(0.15) translateZ(0);
}
.fx [data-fx] .bar {
  transform-origin: bottom;
  transition: opacity 0.4s ease calc(var(--i, 0) * 9ms + 150ms), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 9ms + 150ms);
}

@media (prefers-reduced-motion: reduce) {
  .fx .banner::after,
  .fx .banner .badge-dot::after {
    animation: none;
  }
}